CSS3: Selektory interfejsu użytkownika

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
  • :optional

: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.

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.

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 :).

#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.

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

:required i :optional

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 :)

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.