Selektory#
Pseudokalsa tekstu zastępczego#
:placeholder-shown { /* deklaracje */ }Pseudoklasa :placeholder-shown reprezentuje elementy (wejścia), które mają zdefiniowany i wyświetlają w danej chwili tekst zastępczy (placeholder text) stanowiący krótką wskazówkę dla użytkownika o tym, jaki rodzaj danych powinien wprowadzić. W niektórych źródłach tekst zastępczy nazywa się też znakiem wodnym.
Dla przykładu, HTML5 wprowadza nowy atrybut placeholder odpowiadający za tekst zastępczy w elementach input (tylko dla niektórych typów). Po wczytaniu strony znak wodny będzie widoczny w elemencie do chwili, kiedy go nie wybierzemy i nie wprowadzimy mu jakiejś wartości (choć w IE wystarczy samo wybranie). Gdy pole straci zogniskowanie i żadna wartość nie zostanie do niego wprowadzona, to znak wodny pojawi się ponownie. Pseudoklasa :placeholder-shown będzie miała zastosowanie w chwili, kiedy test zastępczy będzie widoczny w elemencie.
Podobny mechanizm, choć nieco podrasowany, wprowadziłem u siebie na stronie dla wyszukiwania treści (prawy górny róg - pod zdjęciem). Dzięki JS i DOM mam gwarancję, że całość działa identycznie w każdej przeglądarce.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<style>
:placeholder-shown {border: 5px solid green;}
</style>
</head>
<body>
<form action="">
<fieldset>
<legend>Konto e-mail</legend>
<p><label>Imię: <input type="text" placeholder="Jan Kowalski"></label></p>
<p><label>Adres: <input type="email" placeholder="jan@example.net"></label></p>
<p><label>Hasło: <input type="password" name="password"></label></p>
<p><label>Opis: <input type="text" placeholder="Moje konto e-amail"></label></p>
</fieldset>
</form>
</body>
</html>Na chwilę obecną żadna aktualna przeglądarka nie obsługuje pseudoklasy :placeholder-shown.