:read-write

La pseudo-clase :read-write de CSS representa un elemento (como un input) que es editable por el usuario.

/* Selecciona cualquier elemento <input> que sea editable */
/* Compatible con Firefox con un prefijo */
input:-moz-read-write {
  background-color: #bbf;
}

/* Compatible con Blink/WebKit/Edge sin un prefijo */
input:read-write {
  background-color: #bbf;
}

Nota: Este selector no solo selecciona texto de <input>; seleccionará cualquier elemento que pueda editar el usuario, como un elemento <p> con contenteditable establecido en él.

Sintaxis

:read-write

Ejemplo

HTML

<input type="text" value="Escribe lo que quieras aquí.">
<input type="text" value="Este es un campo de solo lectura." readonly>
<p>Este es un párrafo normal.</p>
<p contenteditable="true">¡Puedes editar este párrafo!</p>

CSS

input { min-width: 25em; }
input:-moz-read-write { background: cyan; }
input:read-write { background: cyan; }

p:-moz-read-write { background: lightgray; }
p:read-write { background: lightgray; }
p[contenteditable="true"] { color: blue; }

Resultado

Especificaciones

Especificación Estado Comentarios
HTML Living Standard
La definición de ':read-write' en esta especificación.
Living Standard Ningún cambio.
HTML5
La definición de ':read-write' en esta especificación.
Recommendation Define la semántica con respecto a HTML y validación de restricciones.
Selectors Level 4
La definición de ':read-write' en esta especificación.
Working Draft Define la pseudo-clase, 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-writeChrome Soporte completo 1Edge Soporte completo 13Firefox Soporte completo 78
Soporte completo 78
Soporte completo 1.5
Prefijado
Prefijado Requiere de un prefijo de vendedor : -moz-
IE Sin soporte NoOpera Soporte completo 9Safari Soporte completo 4WebView Android Soporte completo ≤37Chrome Android Soporte completo 18Firefox Android Soporte completo 4
Prefijado
Soporte completo 4
Prefijado
Prefijado Requiere de un prefijo de vendedor : -moz-
Opera Android Soporte completo 10.1Safari iOS Soporte completo 3.2Samsung Internet Android Soporte completo 1.0

Leyenda

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