Atrybut placeholder znacznika input w HTML5 i jego stylowanie

HTML5 wprowadza atrybut placeholder elementu input. Służy on do określenia tekstu wyświetlanego przez ten element, kiedy nie została wprowadzona do niego żadna wartość. Jest on obsługiwany przez silnik Gecko Firefoksa oraz WebKit (Safari, Chrome).

Na przykład, jeśli chcemy, by niewypełnione pole służące do wprowadzenia adresu e-mail wyświetlało napis “Wpisz adres e-mail”, wystarczy nadać ten atrybut wybranemu inputowi (demo #1):

<!DOCTYPE html>
<html lang="pl">
<title>input placeholder demo</title>
<form method="POST">
<label>E-mail: <input type=email placeholder="Wpisz adres e-mail"></label>
</form>

Tak to będzie wyglądało:

Zrzut ekranu - demo 1

Firefox od następnej wersji beta (a w nightly buildach – od dziś) obsługuje ponadto stylowanie tego napisu. Oznacza to, że może on mieć np. inny kolor lub tło niż domyślny szary. Przydaje się to szczególnie, jeśli zmieniliśmy kolory tła naszych inputów.

W chwili obecnej standard CSS nie opisuje zasad stylowania takiego tekstu, przeglądarki implementują więc na razie własne, niestandardowe rozwiązania. Do ustawienia stylu dla tekstu placeholdera w Gecko używamy pseudoklasy :-moz-placeholder. W przeglądarkach opartych na silniku WebKit korzystamy z pseudoelementu ::-webkit-input-placeholder. Tak więc, by w Firefoksie, Chrome i Safari nadać zielony kolor placeholderowi, musimy jak na razie użyć dwóch regułek (demo #2):

<!DOCTYPE html>
<html lang="pl">
<title>input placeholder demo</title>
<style>
input:-moz-placeholder {color: #00cc00}
input::-webkit-input-placeholder {color: #00cc00}
</style>
<form method="POST">
<label>E-mail: <input type=email placeholder="Wpisz adres e-mail"></label>
</form>

Efekt:

Zrzut ekranu - demo 2

Ważne: ponieważ regułka CSS jest odrzucana przez parser, jeśli przynajmniej jeden z selektorów oddzielonych przecinkiem jest dlań niezrozumiały, niestety NIE możemy uprościć tych regułek do postaci:

input:-moz-placeholder,
input::-webkit-input-placeholder {color: #00cc00}

ponieważ żadna przeglądarka nie rozumie ::-webkit-* i :-moz-* równocześnie. Muszą to być zatem dwie osobne regułki, tak jak we wcześniejszych przykładach.

Uwaga: różnice między pseudoklasą a pseudoelementem sprawiają, że nieco inny jest zakres możliwości stylowania tego tekstu (porównaj demo #3 w Gecko i WebKicie). Dopóki jednak ograniczamy się do prostych rzeczy (np. zmiana koloru), można uzyskać w obu silnikach taki sam wygląd.

Advertisements

2 responses to “Atrybut placeholder znacznika input w HTML5 i jego stylowanie

  1. PablO

    Hmm, może lepiej by było jakby wprowadzili pseudoklasę oznaczającą zmieniony przez użytkownika element, np. :changed (~ jak jest z:checked)? Wówczas możnaby to zrobić tak:
    input { style dla placeholdera; }
    input:changed { style dla inputa; }
    Albo lepiej, żeby działało w przeglądarkach nie obsługujących tej pseudoklasy:
    input:not(:changed) { style dla placeholdera; }
    input { style dla inputa; }

    Przy okazji selektor ten przydałby się przy oznaczaniu wymaganych pół, które nie zostały wypełnione:
    input[required]:not(:changed) { styl dla niewypełnionego wymaganego pola; }
    input[required]:changed { styl dla wypełnionego wymaganego pola; }

  2. PablO

    Ewentualnie wprowadzić :indeterminate o którym napomina specyfikacja i podciągnąć do wyżej wymienionego zachowania dla input[type=”text”], textarea

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

MDN

Better JavaScript docs for a better Web on MDN

Archiwum

%d bloggers like this: