La pseudo-classe :read-only permet de cibler un élément que l'utilisateur ne peut pas modifier (l'élément est en lecture seule).

/* Cible n'importe quel élément <input> */
/* en lecture seule */

/* Firefox utilise un préfixe */
input:-moz-read-only {
  background-color: #ccc;
}

/* Blink/WebKit/Edge n'ont pas de préfixe */
input:read-only {
  background-color: #ccc;
}

Note : Ce sélecteur ne permet pas de cibler que les éléments <input> avec readonly. Il permet de sélectionner n'importe quel élément qui ne peut pas être édité par l'utilisateur.

Syntaxe

:read-only

Exemples

CSS

input { min-width: 25em; }
input:-moz-read-only { background: cyan; }
input:read-only { background: cyan; }

p:-moz-read-only { background: lightgray; }
p:read-only { background: lightgray; }
p[contenteditable="true"] { color: blue; }

HTML

<input type="text" value="Un champ en lecture seule" readonly />
<p contenteditable="true">
  Essayez un peu d'éditer ce paragraphe.
</p>
<p>
  Bonne chance pour celui-là !
</p>

Résultat

Spécifications

Spécification État Commentaires
HTML Living Standard
La définition de ':read-only' dans cette spécification.
Standard évolutif Aucune modification.
HTML5
La définition de ':read-only' dans cette spécification.
Recommendation Définition de la sémantique relative à HTML et aux contraintes de validation.
Selectors Level 4
La définition de ':read-only' dans cette spécification.
Version de travail Définition de la pseudo-classe mais pas de la sémantique associée.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet OuiEdge Support complet OuiFirefox Support complet Oui
Préfixée Notes
Support complet Oui
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Notes See bug 312971 for unprefixed status.
IE Aucun support NonOpera Support complet OuiSafari Support complet OuiWebView Android ? Chrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet Oui
Préfixée Notes
Support complet Oui
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Notes See bug 312971 for unprefixed status.
Opera Android ? Safari iOS ? Samsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, Norihiori, NathanB
Dernière mise à jour par : SphinxKnight,