Selektory#
Pseudokalsa zablokowania#
:disabled { /* deklaracje */ }Pseudoklasa :disabled reprezentuje elementy interfejsu użytkownika (wejścia), które są w stanie zablokowanym; elementy mają również odpowiadający stan odblokowania.
Co faktycznie oznacza stan odblokowania, stan zablokowania, a także element interfejsu użytkownika, jest zależne od języka gospodarza. Najnowszy HTML5 podaje listę elementów ze stanem zablokowania, które będą pasowały do pseudoklasy :disabled.
Zablokowanie jest stanem na żądanie, w przeciwieństwie do domyślnego stanu odblokowania, dlatego też wymaga wprowadzenia dodatkowego atrybutu w elementach. W (X)HTML elementy blokujemy za pomocą logicznego atrybut disabled. Zablokowany element w większości przeglądarek wyświetlany jest w formie wyszarzonej. Nie można do niego wpisywać żadnego tekstu, przełączyć stanu czy aktywować (blokada dotyczy wszelkiej formy interaktywności). Dodatkowo element taki w ogóle nie jest przesyłany z danymi formularza.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<style>
:enabled {outline: 5px solid green; border: 5px solid green;}
:disabled {outline: 5px solid red; border: 5px solid red;}
</style>
</head>
<body>
<p>type="text" <input size="40" type="text"> <input size="40" type="text" disabled="disabled"></p>
<p>type="radio" <input type="radio"> <input type="radio" disabled="disabled"></p>
<p>type="checkbox" <input type="checkbox"> <input type="checkbox" disabled="disabled"></p>
<p>type="file" <input type="file"> <input type="file" disabled="disabled"></p>
<p>type="reset" <input type="reset"> <input type="reset" disabled="disabled"></p>
<p>type="button" <input type="button" value="Press"> <input type="button" value="Press" disabled="disabled"></p>
<p>button <button>Przycisk</button> <button disabled="disabled">Przycisk</button></p>
<p>select + option
<select>
<option>Mozilla Firefox</option>
<option disabled="disabled">Microsoft Internet Explorer</option>
</select>
</p>
<p>select + option
<select disabled="disabled">
<option>Mozilla Firefox</option>
<option>Microsoft Internet Explorer</option>
</select>
</p>
<p>textarea <textarea rows="3" cols="55"></textarea></p>
<p>textarea <textarea rows="3" cols="55" disabled="disabled"></textarea></p>
<ul>
<li><a href="http://www.crimsteam.site90.net">www.crimsteam.site90.net</a></li>
<li><a>www.w3.org</a></li>
</ul>
</body>
</html>Najciekawsze będą ostatnie przypadki z odsyłaczami z/bez atrybutu href. Zgodnie z najnowszym HTML5 hiperłącze powinno być w stanie odblokowania (stan zablokowania w ogóle nie występuje), ale na dzień dzisiejszy żadna aktualna przeglądarka nie spełnia tych wymagań. Z drugiej strony zastanawiam się, czy nie jest to po prostu błąd w specyfikacji.