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 {...}
