Clase pseudo CSS :read-only
El selector :read-only selecciona elementos que no pueden ser editados por el usuario.
Los elementos que son editables incluyen:
<input>que no sean de solo lectura y que no estén deshabilitados.<textarea>que no sea ni de solo lectura ni deshabilitado.- Un elemento que no sea
<input>ni<textarea>, y que tenga el atributocontenteditableestablecido entrue.
Por el contrario, :read-only coincide con estos elementos cuando el atributo contenteditable es false o está ausente.
El selector :read-only puede combinarse con otros selectores (p. ej. :hover) y con pseudoelementos (p. ej. ::after).
Versión
CSS Basic User Interface Module Level 3
Sintaxis
Sintaxis de CSS :read-only
:read-only {
css declarations;
}Ejemplo del selector :read-only:
Ejemplo de código 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>El atributo enumerado contenteditable indica si el usuario puede editar el elemento. Cuando está habilitado, el widget del navegador se modifica para permitir la edición. El atributo debe tener uno de los siguientes valores:
true(o la cadena vacía), indicando que el elemento debe ser editable;false, indicando que el elemento no debe ser editable.
Ejemplo del selector :read-only con el atributo contenteditable:
Ejemplo de la clase pseudo CSS :read-only con el atributo 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>Ejemplo del selector :read-only con la etiqueta HTML <textarea> en hover:
Ejemplo del selector CSS :read-only con la etiqueta HTML <textarea> y el caso en hover
<!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>Ejemplo del selector :read-only con la etiqueta HTML <div> y los pseudoelementos :after, :before:
Ejemplo de clase pseudo CSS :read-only con pseudoelementos :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>Práctica
¿Qué selecciona la pseudo-clase CSS :read-only?