:read-only

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 para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
:read-onlyChrome Soporte completo 1Edge Soporte completo 13Firefox Soporte completo 1.5
Prefijado Notas
Soporte completo 1.5
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 4WebView Android Soporte completo ≤37Chrome Android Soporte completo 18Firefox Android Soporte completo 4
Prefijado Notas
Soporte completo 4
Prefijado Notas
Prefijado Requiere de un prefijo de vendedor : -moz-
Notas See bug 312971 for unprefixed status.
Opera Android Soporte completo SiSafari iOS Soporte completo 3.2Samsung Internet Android Soporte completo 1.0

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
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