Pseudo-classe read-only

La pseudo-classe read-only définit le style des inputs avec l'attribut readonly. Un tel input est destiné à la lecture seule, c'est-à-dire qu'il est impossible d'y saisir ou de modifier des données, mais il est possible de les sélectionner et de les copier.

Syntaxe

sélecteur:read-only {
	
}

Exemple

Définissons des bordures gris pâle pour un input en lecture seule :

<p>
	<label>Enter text</label>
	<input type="text">
</p>
<p>
	<label>Read text</label>
	<input type="text" value="text" readonly>
</p>

input:read-only {
	border: 1px solid #D8DFE8;
}

Voir aussi

la pseudo-classe :read-write,
qui définit le style des inputs modifiables
la pseudo-classe :default,
qui définit le style des éléments par défaut
la pseudo-classe :indeterminate,
qui définit le style des boutons radio ou cases à cocher dans un état indéterminé
la pseudo-classe :optional,
qui définit le style d'un input qui ne possède pas l'attribut required
la pseudo-classe :placeholder-shown,
qui définit le style des éléments lorsque le texte d'aide est affiché
la pseudo-classe :required,
qui définit le style d'un input qui possède l'attribut required
la pseudo-classe :focus-within,
qui définit le style des éléments ayant le focus
la propriété caret-color,
qui définit la couleur du curseur texte dans un input