Blokada :disabled :enabled

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

CSS 3

Pole zablokowane:
```
selektor:disabled { cecha: wartość }
```
Pole odblokowane:
```
selektor:enabled { cecha: wartość }
```

Selektorem mogą być pola formularza, którym można przypisać atrybut disabled="..." [zobacz: Wstawianie stylów].
Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach.

Pola formularza mogą znajdować się w wielu stanach - jednym z nich jest blokada kontrolki. Zablokowane pole w większości przeglądarek wyświetlane jest w formie wyszarzonej. Użytkownik nie może do niego wpisywać żadnego tekstu ani go włączyć (w przypadku kontrolek typu przełącznik). Blokadę ustala się poprzez przypisanie atrybutu disabled. W odróżnieniu od pól w stanie tylko do odczytu (atrybut readonly), pola zablokowane nie są w ogóle wysyłane w formularzu. Pole odblokowane to natomiast takie, które nie posiada atrybutu disabled (domyślnie).

Przykład :disabled :enabled

Po wpisaniu w arkuszu stylów:

input:disabled { border: 1px solid blue }
input:enabled { border: 1px solid red }

a w dowolnym miejscu strony:

<form action="?">
	<input type="text" value="Zablokowane" disabled>
	<input type="text" value="Odblokowane">
</form>

otrzymamy dwie tekstowe kontrolki formularza - pierwsza z niebieskim obramowaniem (zablokowana), a druga z czerwonym (odblokowana):

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
`:enabled`	1 2008-12-11	1 2004-11-09	12 2015-07-29	9 2006-06-20	3.1 2008-03-18
`:disabled`	1 2008-12-11	1 2004-11-09	12 2015-07-29	9 2006-06-20	3.1 2008-03-18

Komentarze

Zobacz więcej komentarzy