La pseudo-clase :read-only
de CSS representa un elemento que ya no es editable por el usuario (como un input).
/* 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.
Sintaxis
:read-only
Ejemplo
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
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
Especificación | Estado | Comentarios |
---|---|---|
HTML Living Standard La definición de ':read-only' en esta especificación. |
Living Standard | Ningún cambio. |
HTML5 La definición de ':read-only' en esta especificación. |
Recommendation | Define la semántica relacionada con HTML y de la validación de las restricciones. |
Selectors Level 4 La definición de ':read-only' en esta especificación. |
Working Draft | Define la pseudoclase, pero no la semántica asociada. |
Compatibilidad con navegadores
BCD tables only load in the browser
Ver también
:read-write
- Atributo HTML
contenteditable