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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Soporte básicoChrome Soporte completo SiEdge Soporte completo SiFirefox Soporte completo Si
Prefijado Notas
Soporte completo Si
Prefijado Notas
Prefijado Requiere de un prefijo de vendedor : -moz-
Notas See bug 312971 for unprefixed status.
IE Sin soporte NoOpera Soporte completo SiSafari Soporte completo SiWebView Android ? Chrome Android Soporte completo SiEdge Mobile Soporte completo SiFirefox Android Soporte completo Si
Prefijado Notas
Soporte completo Si
Prefijado Notas
Prefijado Requiere de un prefijo de vendedor : -moz-
Notas See bug 312971 for unprefixed status.
Opera Android ? Safari iOS ? Samsung Internet Android Soporte completo Si

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Compatibility unknown  
Compatibility unknown
Ver notas de implementación.
Ver notas de implementación.
Requiere de un prefijo de proveedor o un de nombre diferente para su uso.
Requiere de un prefijo de proveedor o un de nombre diferente para su uso.

Ver también

Etiquetas y colaboradores del documento

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