Jedną z ciekawych grup nowych selektorów w CSS3 są tzw. selektory interfejsu użytkownika (CSS 3 UI Module). Dzięki nim dostajemy możliwość nadawania stylów elementom formularza, w zależności od stanu w jakim się znajdują. Do tych pseudoklas należą:

• :disabled
• :enabled
• :checked
• :invalid
• :valid
• :read-write
• :read-only
• :required
• ptional

:enabled i :disabled

Pierwsze selektory przydają się w sytuacji gdy element jest dostępny (możemy w nim np pisać), lub zablokowany. Mówiąc inaczej, :disabled dopasuje się do elementu który posiada atrybut disabled a :enabled w pozostałych przypadkach.

Ukryj kod

input:enabled{
     border: 2px solid green;
}

input:disabled{
     border: 2px solid red;
}

:checked

:checked dopasuje się do elementu radio lub checkbox, który został zaznaczony, lub posiada domyślny atrybut checked.

Ukryj kod

input:checked + label{
	width: 20px;
	color: red;
	background-color: yellow;
}

:invalid i :valid

HTML 5 wprowadzając nowe typy kontrolek w formularzach, dało nam możliwość bardziej szczegółowo określić, jakich danych oczekujemy od użytkownika. Skorzystali z tego również twórcy przeglądarek (oczywiście nie wszyscy), wprowadzając możliwość walidacji takich formularzy. CSS nie został w tyle i udostępnił nam dwa specjalne selektory związane z tym procesem, i tak :invalid nadaje style elementom źle wypełnionych a jego „brat” :valid elementom poprawnym. Proste prawda .

Ukryj kod

#email:invalid{
	border: 4px red solid;
}

#email:valid{
	border: 4px green solid;
}

:read-write i :read-only

Kolejną użyteczną grupą są selektory :read-write i :read-only. Pierwszy z nich dopasuje się do elementy w którym możemy wprowadzać jakieś dane, a drugi jeżeli pole jest tylko do odczytu.

Ukryj kod

input:read-only{
	border: 4px #d64204 solid;
}

:required i ptional

Selektor :required wyróżnia element wymagany (posiadający atrybut required) a w pozostałych przypadkach wykorzystywany jest selektor :optional. Mam nadzieje że jest to zrozumiałe

Ukryj kod

input:required{
     border: 2px red solid;
}

Wsparcie przeglądarek

Na koniec raport na temat wsparcia przeglądarek. Chrome, Opera oraz Safari oferują pełne wsparcie dla nowych selektorów, Firefox4 nie obsługuje :disabled, :enabled, :read-write i :read-only a IE9 poprawnie interpretuje tylko :checked. Testy przeprowadzam na najnowszych wersjach przeglądarek.

Przykład użycia

Zamieszczam przykład użycia tych selektorów: selektory interfejsu użytkownika – przykład.