Pseudoklasa CSS :placeholder-shown

> Dodaj do ulubionych

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:

Efekt zastosowania pseudoklasy :placeholder-shown

Składnia :placeholder-shown

Składnia pseudoklasy :placeholder-shown:

:placeholder-shown {...}