CSS :read-only Pseudo-classe
Le sélecteur :read-only sélectionne les éléments qui ne sont pas modifiables par l'utilisateur.
Les éléments modifiables incluent :
<input>qui ne sont pas en lecture seule et qui ne sont pas désactivés.<textarea>qui n'est ni en lecture seule ni désactivé.- Un élément qui n'est ni un
<input>ni un<textarea>, et qui possède l'attributcontenteditabledéfini surtrue.
À l'inverse, :read-only correspond à ces éléments lorsque l'attribut contenteditable est false ou absent.
Le sélecteur :read-only peut être combiné avec d'autres sélecteurs (par ex. :hover) et avec des pseudo-éléments (par ex. ::after).
Version
CSS Basic User Interface Module Level 3
Syntaxe
Syntaxe CSS :read-only
:read-only {
css declarations;
}Exemple du sélecteur :read-only :
Exemple de code CSS :read-only
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input {
margin-bottom: 10px;
border: 1px solid #ddd;
padding: 5px;
}
input:read-only {
background-color: #ccc;
}
</style>
</head>
<body>
<h2>:read-only selector example</h2>
<form>
<div>
<label for="normal">Example1</label>
<input value="normal input" id="normal" />
</div>
<div>
<label for="read-only">Example2</label>
<input readonly value="read-only input" id="read-only" />
</div>
</form>
</body>
</html>L'attribut énuméré contenteditable indique si l'utilisateur peut modifier l'élément. Lorsqu'il est activé, le widget du navigateur est modifié pour autoriser l'édition. L'attribut doit prendre l'une des valeurs suivantes :
true(ou la chaîne vide), indiquant que l'élément doit être modifiable ;false, indiquant que l'élément ne doit pas être modifiable.
Exemple du sélecteur :read-only avec l'attribut contenteditable :
Exemple de pseudo-classe CSS :read-only avec l'attribut contenteditable
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:read-only {
background: #8ebf42;
}
p[contenteditable="true"] {
color: #777777;
}
</style>
</head>
<body>
<h2>:read-only selector example</h2>
<p>Example of a normal paragraph.</p>
<p contenteditable="true">Example of a contenteditable paragraph! Just click and edit!</p>
</body>
</html>Exemple du sélecteur :read-only avec la balise HTML <textarea> au survol :
Exemple du sélecteur CSS :read-only avec la balise HTML <textarea> et au survol
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
textarea:read-only {
background: #ffffff;
}
textarea:read-only:hover {
cursor: not-allowed;
background: #8ebf42;
}
</style>
</head>
<body>
<h2>:read-only selector example</h2>
<textarea cols="40" rows="5" readonly>Here is an example of :read-only selector on hover.</textarea>
</body>
</html>Exemple du sélecteur :read-only avec la balise HTML <div> et les pseudo-éléments :after, :before :
Exemple de pseudo-classe CSS :read-only avec les pseudo-éléments :before, :after
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div:read-only:hover {
background-color: #eee;
}
div:read-only:before,
div:read-only:after {
content: " / ";
padding: 10px;
color: #1c87c9;
font-size: 30px;
}
</style>
</head>
<body>
<h2>:read-only selector example</h2>
<div readonly>Here is an example of :read-only selector on hover.</div>
<br />
<div contenteditable="true">Example of a contenteditable paragraph! Just click and edit!</div>
</body>
</html>Pratique
Que sélectionne la pseudo-classe CSS :read-only ?