Pseudoklasa CSS :read-only wybiera elementy, które są przeznaczone tylko do odczytu, tzn. użytkownik nie ma możliwości ich edytowania (jest odwrotnością pseudoklasy :read-write
). W praktyce oznacza to, że domyślnie pseudoklasa ta nie odnosi się tylko do edytowalnych pól formularza, takich jak niektóre typy pola input
i element textarea. Wybiera ona nawet elementy body
i html
.
Ponadto pseudoklasa :read-only
nie wybiera elementów (zarówno należących, jak i nienależących do formularza), która mają zdefiniowany atrybut contenteditable
oraz elementów input
i textarea
z atrybutem readonly
.
Przykład użycia :read-only
Wszystkie poniższe elementy zostałyby wybrane przez pseudoklasę :read-only
, w efekcie czego miałyby czerwony obrys.
<style>
:read-only {outline: 1px solid red}
</style>
...
<p>Akapit</p>
<section>Sekcja</section>
<header>Nagłówek</header>
<input readonly>
Natomiast spośród poniższych elementów pseudoklasa :read-only
nie wybrałaby żadnego:
<input>
<footer contenteditable>
<textarea>Obszar tekstowy</textarea>
Składnia :read-only
Składnia pseudoklasy :read-only
:
:read-only {...}