:read-only
Baseline
Widely available
This feature is well established and works across many devices and browser versions. Itâs been available across browsers since â¨julio de 2020â©.
La pseudo-clase :read-only de CSS representa un elemento que ya no es editable por el usuario (como un input).
css
/* Selecciona cualquier <input> que está en modo de solo lectura */
/* Soportado en Firefox usando prefijo */
input:-moz-read-only {
background-color: #ccc;
}
/* El prefijo no es necesario en navegadores basados en Blink/WebKit/Edge */
p:read-only {
cursor: not-allowed;
}
input:read-only {
background-color: #ccc;
}
Nota:
El selector no solo selecciona <input> marcados como readonly; también selecccionará cualquier elemento que no pueda ser editar por el usuario. Lea sobre el atributo contenteditable.
SÃntaxis
:read-only
Ejemplo
HTML
html
<input type="text" value="Aquà puedes poner lo que quieras." />
<input type="text" value="Campo de solo lectura." readonly />
<p>Este es un párrafo normal.</p>
<p contenteditable="true">Puedes editar este párrafo, ¡inténtalo!</p>
CSS
css
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;
}
Resultado
Especificaciones
| Specification |
|---|
| HTML # selector-read-only |
| Selectors Level 4 # read-only-pseudo |
Compatibilidad con navegadores
Ver también
:read-write- Atributo HTML
contenteditable