Selektory pseudoklas - CSS

Blokada :disabled :enabled

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

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

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):

Komentarze

Zobacz więcej komentarzy