Pseudoklasa CSS :placeholder-shown wybiera elementy input i textarea wyświetlające tekst pomocniczy. Inaczej mówiąc pseudoklasa ta odnosi się do wszystkich elementów input i textarea, które mają zdefiniowany atrybut ::placeholder i jego wartość jest widoczna dla użytkownika.
Przykład użycia :placeholder-shown
Za pomocą pseudoklasy :placeholder-shown można na przykład wyróżnić wizualnie elementy formularza zawierające tekst podpowiedzi.
W poniższym przykładzie pole tekstowe z tekstem pomocniczym jest wyróżnione jasnożółtym tłem.
<style>
input:placeholder-shown {
background-color: lightyellow;
}
label {
display: block;
margin-bottom: 10px;
}
</style>
<form>
<label>Imię: <input name="imie" placeholder="Wpisz swoje imię"></label>
<label>Nazwisko: <input name="nazwisko"></label>
Efekt w przeglądarce:
Składnia :placeholder-shown
Składnia pseudoklasy :placeholder-shown:
:placeholder-shown {...}