CSS reference manual

CSS @rules

CSS attributes大全

Fonctions CSS Manuel complet des sélecteurs CSS

CSS :read-only sélecteur

:read-Seulement CSS pseudo-classe indique l'état non modifiable de l'élément par l'utilisateur (comme un champ de texte verrouillé).

Complete CSS Selector Reference Manual

Exemple en ligne

L'élément input avec l'attribut "readonly" est configuré avec un fond de couleur verte bleu:

Exemple

<!DOCTYPE　html>
<html>
<head>
<meta charset="utf-8">　
<title>Basic Tutorial(oldtoolbag.com)</title>/title>　
<style>
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; }
</style>
</head>
<body>
<input type="text" value="Enter anything you want here.">
<input type="text" value="Read-only." readonly>
<p>Normal paragraph.</p>/p>
<p contenteditable="true">Editable paragraph!</p>/p>
</body>
</html>

Test to see ‹/›

Definition and Usage

:read-The only selector is used to select elements that have the "readonly" attribute set.

Form elements can be set with the "readonly" attribute to define elements as read-only.

Note: Currently, most browsers, :read-The only selector is applicable to input and textarea elements, but it also applies to elements that have the "readonly" attribute set.

Browser Compatibility

The numbers in the table indicate the first browser version number that supports this property.

Selector
:read-only	Supported	Not Supported	-moz-	Yes	Yes

CSS Syntax

/*　To select any read-only input elements and to be supported in Firefox, you need to add-moz prefix　*/
input:-moz-read-only　{
　　background-color: #ccc;
}
input:read-only　{
　　background-color: #ccc;
}

Note: this selector does not only select <input> elements with the readonly attribute, it also selects all elements that cannot be edited by the user.

CSS Selector :read-write