2011-10-06 13 views
14

Czy mimo to należy zmienić wartość wpisu tekstowego (domyślny tekst wyświetlany) za pomocą css?Zmień wartość wpisu tekstowego za pomocą css?

Im optomizuję stronę dla urządzeń mobilnych i chcę, aby tekst "szukaj w tej witrynie" został skrócony do "wyszukiwania". Dzięki

+0

czy za pomocą JavaScript, aby wykryć przeglądarkę użytkowników i zmienić pola? http://www.w3schools.com/js/js_browser.asp – Waltzy

+1

@Waltzy - nie wykrywaj samej przeglądarki; to zła praktyka. Zamiast tego, wykryj możliwości przeglądarki za pomocą narzędzi takich jak Modernizr; jest bardziej niezawodny i zapewnia dokładniejszą kontrolę. Istnieje bardzo niewiele przypadków, w których wykrywanie przeglądarki jest konieczne, ponieważ inne techniki nie działają, ale to nie jest jedna z nich. – Spudley

+0

@Spudley Pozdrowienia dla głów, będę o tym pamiętać. – Waltzy

Odpowiedz

12

To naprawdę nie jest to, do czego służy CSS.

CSS służy do stylizowania treści; HTML dotyczy samej treści.

Jeśli chcesz zmodyfikować zawartość po załadowaniu HTML, to właśnie dla tego jest JavaScript.

Tak więc prawdziwa odpowiedź na twoje pytanie brzmi: albo zmień HTML bezpośrednio, albo użyj Javascript.

Są pewne rzeczy, które może zrobić z CSS, które wpływają na treść, takie jak dodanie dodatkowego tekstu w-przodu lub z tyłu elementu używając pseudo-selektorów :before i :after, ale to nie pomoże w w tym przypadku i nie powinny być używane do rodzaju pracy nad zmianą treści, o której mówisz.

Nawiasem mówiąc, nieco poza tematem, ale jeśli używasz wartości pola tekstowego jako tekstu zachęty, możesz rozważyć zaglądnięcie do atrybutu HTML5 placeholder. To również nie odpowiada na twoje pytanie, ale brzmi, jakby to było coś, co może ci się przydać.

+3

Cóż, jeśli * całkowicie * zignorujesz właściwość "treść" CSS, przypuszczam, że to prawda. –

+3

@RubenMartinezJr .: Nie zignorowałem 'treści'; dotyczy tylko selektorów takich jak ': before' i to jest w odpowiedzi. Ale chodzi o to, że nawet jeśli możesz to zrobić, nie powinieneś: umieszczanie znaczących treści w CSS to zła praktyka. Niweluje on rozziew między stylem i treścią, dla której zaprojektowano CSS, i ma problemy z użytecznością dla użytkowników końcowych (np. Nie może być kopiowany i wklejany, nie jest odczytywany przez czytniki ekranu dla niewidomych użytkowników itp.). Najważniejsze jest to, że własność 'content' w': before' i ': after' powinna być używana tylko dla efektów specjalnych, a nie dla rzeczywistej zawartości witryny. – Spudley

5

Nie, CSS nie może zmienić atrybutu value z input ani żadnego atrybutu żadnego elementu.

1

Jeśli chcesz zmienić wartość, użyj atrybutu "wartość" HTML;

przykład:

<input type="submit" value="ENVIAR"> 

że zmieni domyślne "submit" wartość "enviar"

1

późno do partii, ale używając "content" atrybutu, w ciągu element:before będzie osiągnąć to, co trzeba, jak widać w http://www.w3schools.com/cssref/tryit.asp?filename=trycss_content_string

byłem w stanie manipulować wartość zawartości poprzez przycisk jQuery toggleClass, przełączanie między następujących klas:

.open_button:before{ 
    content:"open"; 
} 
.close_button:before{ 
    content: "close"; 
} 

Rozumiem skrupuły, ale wydaje mi się, że toggleClass zapewnia elegancję, która usprawiedliwia sztuczkę CSS. W przeciwnym razie można użyć funkcji przełączania z zagnieżdżonymi funkcjami przełącznika css. Osobiście uważam, że unikanie zagnieżdżonych funkcji jQuery wygląda lepiej.

0

Dla mnie rozwiązaniem było

<button type="submit" class="mybutton" name="add"> 
    <span class="add">Add new</span> 
</button> 

dlatego css będą:

.mybutton:hover .add:after{content="0"} 
-3

tak proste, wystarczy wpisać na przykład:

button { 
 
color: red; 
 
font-family: sans-serif; 
 
}

tam jesteś, przyciski podjęcia wszelkich wejść z wartościami z na przykład złożyć/reset/Etc ..

+4

On nie chce zmieniać koloru i czcionki. –

0

Rozwiązanie to jest trochę trudne,

ale to zawsze działa na mnie.

/*CSS Code*/ 
 

 
@media screen and (max-width: 768px) { 
 
.showondesktop { 
 
display: none !important; } 
 
} 
 

 
#showonmobile { 
 
    display:none; 
 
} 
 
@media screen and (max-width: 767px) { 
 
    #showonmobile { 
 
display:block; } 
 
}
<!--HTML Code-> 
 

 
<div class="showondesktop"> search this site </div> 
 

 
<div id="showonmobile"> search </div>

Kiedy strona jest odwiedzana z Mobile będzie ona wyświetlana „przeszukiwanie”, ale kiedy odwiedził z pulpitu zostanie wyświetlony komunikat „Szukaj na stronie”. Podgląd

Obrazek:

Output-Desktop-view.jpg

Output-Mobile-view.jpg

Powiązane problemy