Selektory#
Pseudokalsa odczytu#
:read-only { /* deklaracje */ }Pseudoklasa :read-only reprezentuje elementy (wejścia), które nie pozwalają użytkownikom na edycyjną zmianę (są tylko do odczytu), jak określono w języku gospodarza.
Najnowszy HTML5 podaje listę elementów ze stanem edytowalności, które będą pasowały do pseudoklasy :read-write. Elementy niespełniające tych wymagań maja zablokowaną edycję i automatycznie pasują do pseudoklasy :read-only.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<style>
body :read-write {border: 10px solid green;}
body :read-only:not(p) {border: 5px solid red;}
body :-moz-read-write {border: 10px solid green;}
body :-moz-read-only:not(p) {border: 5px solid red;}
</style>
</head>
<body>
<div>Kontener bez możliwości edycji.</div>
<div contenteditable="true">Kontener z możliwością edycji (wybierz go myszką lub tabulatorem).</div>
<p>type="text"
<input size="20" type="text" value="read-write">
<input size="20" type="text" readonly="readonly" value="readonly">
<input size="20" type="text" disabled="disabled" value="disabled">
</p>
<p>type="password"
<input size="20" type="password" value="read-write">
<input size="20" type="password" readonly="readonly" value="readonly">
<input size="20" type="password" disabled="disabled" value="disabled">
</p>
<p>textarea <textarea rows="2" cols="20">read-write</textarea></p>
<p>textarea <textarea rows="2" cols="20" readonly="readonly">readonly</textarea></p>
<p>textarea <textarea rows="2" cols="20" disabled="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>Na chwilę obecną żadna aktualna przeglądarka nie obsługuje pseudoklasy :read-only prawidłowo. Można przetestować prefiksowe polecenie :-moz-read-only dla Firefoksa, jak w powyższym przykładzie. Nie wszystko działa jak należy; elementy z atrybutem disabled nie zostały wybrane, a powinny. Specjalnie zawęziłem wybór do potomków body, z wykluczeniem p, przez co całość zachowuje większą czytelność.
W Chrome nie potrzeba prefiksów, ale występuje identyczny błąd jak w Firefoksie, w dodatku pseudoklasa ma zastosowanie jedynie dla kontrolek formularzy.