:placeholder-shown
Pasuje do pola input lub textarea, które w tej chwili wyświetla tekst zastępczy, czyli jest puste i ma atrybut placeholder.
Przykład
#.float {
position: relative;
}
.float label {
position: absolute;
left: 12px;
top: 50%;
translate: 0 -50%;
color: #a1a1aa;
pointer-events: none;
transition: all 0.15s;
}
.float input:focus + label,
.float input:not(:placeholder-shown) + label {
top: 0;
padding: 0 4px;
background: #0c0c10;
color: #c4b5fd;
font-size: 12px;
}<div class="float" style="margin-top: 8px;">
<input id="nick" placeholder=" " style="width: 100%; padding: 14px 12px 10px; border: 1px solid #52525b; border-radius: 10px; background: #0c0c10; color: inherit; font: inherit;">
<label for="nick">Nazwa gracza</label>
</div>Pole ma placeholder=" ", czyli spację, bo bez atrybutu pseudoklasa nie zadziała. Kliknij pole i coś wpisz: etykieta przesuwa się na ramkę i zostaje tam, dopóki pole nie jest puste.
Definicja i zastosowanie
#Pseudoklasa :placeholder-shown pasuje do pola tekstowego, dopóki widać w nim podpowiedź z atrybutu placeholder. Gdy użytkownik wpisze pierwszy znak, podpowiedź znika, a pole przestaje pasować. Pole bez atrybutu placeholder nigdy do niej nie pasuje.
To pośredni sposób na sprawdzenie, czy pole jest puste, bo CSS nie ma selektora „pole z wartością”. Stąd popularne połączenie :not(:placeholder-shown), czyli „użytkownik coś wpisał”. Opierają się na nim pływające etykiety i pokazywanie błędów walidacji dopiero po wpisaniu tekstu.
Nie myl jej z pseudoelementem ::placeholder. Pseudoklasa pozwala ostylować całe pole w stanie pustym (ramkę, tło, etykietę obok), a pseudoelement tylko sam tekst podpowiedzi.
Składnia
#selektor:placeholder-shown { właściwość: wartość; }Typowe zastosowania
#- Puste pole z widoczną podpowiedzią ma przerywaną ramkę. Wpisz coś, a ramka zrobi się ciągła.
- Pole, w którym coś wpisano. Drugie pole pasuje od razu, bo ma wartość.
Typowe zastosowania w praktyce
#input:placeholder-shown
input:placeholder-shown {
border-style: dashed;
border-color: #71717a;
}input:not(:placeholder-shown)
input:not(:placeholder-shown) { border-color: #10b981; }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
#- Jeśli nie chcesz widocznej podpowiedzi, a potrzebujesz tej pseudoklasy, ustaw
placeholder=" ". Pole będzie wyglądać na puste, a selektor zadziała. - Placeholder nie zastępuje etykiety: znika przy pisaniu i często ma słaby kontrast. Pływająca etykieta to dobry kompromis, bo zawsze pozostaje widoczna.
Powiązane hasła
#- ::placeholderStylizuje tekst podpowiedzi wyświetlany w pustym polu input lub textarea.
- :invalidPasuje do pól formularza, których wartość łamie reguły walidacji HTML, np. do pustego pola wymaganego albo błędnego adresu e-mail.
- :focusPasuje do elementu, który ma fokus, czyli przyjmuje teraz dane z klawiatury, np. do klikniętego pola formularza.
- :not()Wybiera elementy, które nie pasują do podanego selektora ani do żadnego z listy.
- A + BZnak + wybiera element B, który stoi bezpośrednio za elementem A i ma z nim wspólnego rodzica.
Widzisz błąd albo brakuje przykładu? Napisz do nas.