La pseudoclase CSS :read-only 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>Párrafo normla.</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

Specification Status Comment
HTML Living Standard
The definition of ':read-only' in that specification.
Living Standard Sin cambios.
HTML5
The definition of ':read-only' in that specification.
Recommendation Define la semántica relacionada con HTML y de la validación de las restricciones.
Selectors Level 4
The definition of ':read-only' in that specification.
Working Draft Define la pseudoclase, pero no la semántica asociada.

Compatibilidad en navegadores

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Soporte básico (Yes) (Yes) (Yes)-mozbug 312971 Nightly build [1] (Yes) (Yes)

Elemento editable (excepto para campos de texto)

No support No support (Yes)-mozbug 312971 No support No support No support
Feature Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Soporte básico ? (Yes) (Yes) (Yes)-mozbug 312971 ? ? ?
Elemento editable (excepto para campos de texto) No support No support No support (Yes)-mozbug 312971 No support No support No support

[1]: MS Edge platform status: Windows Insider Preview Build 10547+

Lea también

Etiquetas y colaboradores del documento

Etiquetas: 
 Colaboradores en esta página: j-light
 Última actualización por: j-light,