::placeholder
Stylizuje tekst podpowiedzi wyświetlany w pustym polu input lub textarea.
Przykład
#.input::placeholder {
color: #71717a;
font-style: italic;
}<label style="display: grid; gap: 6px;">
Nazwa gracza
<input class="input" placeholder="np. KodowyPirat" style="padding: 10px 12px; border: 1px solid #52525b; border-radius: 10px; background: #18181b; color: inherit; font: inherit;">
</label>Definicja i zastosowanie
#Pseudoelement ::placeholder pozwala zmienić wygląd tekstu z atrybutu placeholder: kolor, krój, rozmiar czy styl pisma. Działa w polach <input> i <textarea> i jest widoczny tylko wtedy, gdy pole jest puste.
Obsługuje głównie właściwości tekstu. Wymiary pola, obramowanie i dopełnienie ustawiasz na samym polu, a nie na podpowiedzi.
Pamiętaj o kontraście. Podpowiedź często jest jasnoszara i słabo czytelna, a do tego znika przy pierwszym znaku. Nie wpisuj w nią informacji, bez których nie da się wypełnić pola, np. wymaganego formatu daty. Takie wskazówki umieść w etykiecie albo pod polem.
Stan „pole pokazuje podpowiedź” opisuje osobna pseudoklasa, :placeholder-shown. Przydaje się, gdy chcesz ostylować całe pole, a nie tylko tekst podpowiedzi.
Składnia
#selektor::placeholder { właściwość: wartość; }Typowe style
#- Kolor podpowiedzi. Wpisz coś w pole, a podpowiedź zniknie.
- Kursywa odróżnia podpowiedź od tekstu, który wpisze użytkownik.
- Wersaliki z rozstrzelonymi literami i mniejszym stopniem pisma.
- Po kliknięciu w pole podpowiedź blednie, ale zostaje widoczna do pierwszego znaku.
Typowe style w praktyce
#color
.demo::placeholder { color: #a78bfa; }font-style
.demo::placeholder { font-style: italic; }text-transform
.demo::placeholder {
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 12px;
}:focus::placeholder
.demo:focus::placeholder { color: #52525b; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Dbaj o kontrast podpowiedzi. Wytyczne dostępności zalecają dla tekstu kontrast co najmniej 4,5:1, a zbyt jasny szary łatwo tego progu nie spełnia.
- Placeholder nie zastępuje etykiety
<label>. Znika podczas pisania, więc użytkownik szybko zapomina, czego dotyczyło pole.
Powiązane hasła
#- :placeholder-shownPasuje do pola input lub textarea, które w tej chwili wyświetla tekst zastępczy, czyli jest puste i ma atrybut placeholder.
- :focusPasuje do elementu, który ma fokus, czyli przyjmuje teraz dane z klawiatury, np. do klikniętego pola formularza.
- colorUstawia kolor tekstu i domyślny kolor obramowań, dekoracji oraz ikon SVG z currentcolor.
- font-styleWłącza kursywę lub pochylenie tekstu.
- ::selectionZmienia wygląd fragmentu tekstu zaznaczonego przez użytkownika myszą lub klawiaturą.
Widzisz błąd albo brakuje przykładu? Napisz do nas.