Przejdź do treści

Domyślne :default

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

CSS 3

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:

Przeglądarki


Chrome

Firefox

Edge

Opera

Safari
:default10
2011-03-08
4
2011-03-22
79
2020-01-15
10
2009-09-01
5
2010-06-07

Komentarze

Zobacz więcej komentarzy

Facebook