CSS :read-only Pseudo Class
The :read-only selector selects elements which are "readonly". Those are the elements that are not editable by the user.
Elements that are editable include:
- <input> elements that are not read-only and that are not disabled.
- <textarea> that is neither read-only nor disabled.
- An element that is not an <input> or a <textarea>, and that has the contenteditable attribute set.
The :read-only selector can be linked with other selectors (e.g. :hover) and with pseudo-elements (e.g. ::after).
The :read-only pseudo-class selector is supported with the -moz- prefix in Firefox in the following form: -moz-read-only.
Version¶
CSS Basic User Interface Module Level 3
Disabled Elements — HTML5
Syntax¶
:read-only {
css declarations;
}Example of the :read-only selector:¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input {
margin-bottom: 10px;
border: 1px solid #ddd;
padding: 5px;
}
input:-moz-read-only {
background-color: #ccc;
}
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>An enumerated attribute indicates if the user can edit the element. In such a case, the browser widget is modified to allow editing. The attribute should have one of the following values:
- true (or the empty string), indicating that the element should be editable;
- false, indicating that the element should not be editable.
Example of the :read-only selector with contenteditable attribute:¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:-moz-read-only {
background: #8ebf42;
}
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>Example of the :read-only selector with HTML <textarea> tag on hover:¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
textarea:-moz-read-only {
background: #ffffff;
}
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>Example of the :read-only selector with HTML <div> tag and the :after, :before pseudo-elements:¶
<!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>
0 Comments
CAN FEEDBACK
Emoji