Selektory pseudoklas - CSS

Zaznaczenie :checked

Jak zmienić wygląd pól (kontrolek) formularza, które są zaznaczone?

(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 :checked

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 name="pole_opcji">
	<input type="radio" name="pole_opcji">
	</fieldset>
	<fieldset>
	<input type="checkbox" checked>
	<input type="checkbox">
	</fieldset>
	<select size="3">
	<option 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