Przejdź do treści

Selektory pseudoklas - CSS

Domyślne :default

Jak zmienić wygląd domyślnego przycisku formularza lub domyślnej opcji do wyboru?

(CSS 3 - interpretuje Firefox 3, Opera 12- i 38, Chrome 51)

selektor:default { cecha: wartość }
Selektorem mogą być pola formularza: wyboru, opcji oraz opcje listy rozwijalnej, a także przyciski [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 elementy formularza mogą oznaczać domyślną akcję. Na przykład przycisk wysłania formularza powinien być domyślnym. Mimo iż w formularzu może się również znajdować przycisk czyszczenia danych, po wciśnięciu klawisza Enter w dowolnym polu tekstowym, formularz zostanie wysłany, a nie wyczyszczony. Podobnie grupa pól opcji, pola wyboru czy menu rozwijalne mogą mieć zaznaczone pewne opcje. Jeśli wyślemy formularz bez dokonywania w nim zmian, opcje domyślnie zaznaczone zostaną z nim wysłane. Przedstawiony tutaj selektor pozwala w dowolny sposób wyróżnić takie domyślne elementy. Dzięki temu jeśli użytkownik wybierze inną opcję, zawsze będzie widział, która była opcją domyślą, aby ewentualnie do niej wrócić.

Przykład :default

Po wpisaniu w arkuszu stylów:
input:default, option:default, button:default { margin-left: 30px }
a w dowolnym miejscu strony:
<form action="?">
	<fieldset>
	<input type="radio" checked name="pole_opcji" class="przyklad_domyslne">
	<input type="radio" name="pole_opcji" class="przyklad_domyslne">
	</fieldset>
	<select size="3">
	<option selected class="przyklad_domyslne">Opcja 1</option>
	<option class="przyklad_domyslne">Opcja 2</option>
	<option class="przyklad_domyslne">Opcja 3</option>
	</select>
	<div>
	<button type="submit">Wyślij</button>
	<button type="reset">Wyczyść</button>
	</div>
</form>
otrzymamy formularz, w którym domyślne kontrolki mają dodatkowy margines z lewej strony:

Komentarze

Zobacz więcej komentarzy

Facebook