Przejdź do treści

Selektory pseudoklas

Zaznaczenie

(CSS 3 - interpretuje Internet Explorer 9, Firefox, Opera, Chrome)

selektor:checked { cecha: wartość }
Selektorem mogą być pola formularza: wyboru, opcji oraz opcje listy rozwijalnej [zobacz: Wstawianie stylów].
Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach.

Niektóre z pól formularzy pełnią rolę przełączników - można je zaznaczać i odznaczać. W związku z tym może się okazać przydatne dodatkowe wizualne wyróżnienie tych kontrolek, które użytkownik zaznaczył.

Zaznaczenie dla opcji listy rozwijalnej obsługuje tylko Firefox.

Przykład:

Po wpisaniu w arkuszu stylów:
input:checked, option:checked { margin-left: 30px }
a w dowolnym miejscu strony:
<form action="?">
	<fieldset>
	<input type="radio" checked="checked" name="pole_opcji" />
	<input type="radio" name="pole_opcji" />
	</fieldset>
	<fieldset>
	<input type="checkbox" checked="checked" />
	<input type="checkbox"  />
	</fieldset>
	<select size="3">
	<option selected="selected">Opcja 1</option>
	<option>Opcja 2</option>
	<option>Opcja 3</option>
	</select>
</form>
otrzymamy formularz, w którym zaznaczone pola mają dodatkowy margines z lewej strony (aby to sprawdzić zmień zaznaczenie wybranych kontrolek):

Zaznaczona opcja listy rozwijalnej (ostatnia z powyższych kontrolek) będzie wyróżniona najprawdopodobniej tylko w przeglądarce Firefox.

Komentarze

Zobacz więcej komentarzy