: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 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
Matches editable elements that are neither <input> elements nor <textarea> elementsChrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 1.5IE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 4Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Sin soporte No

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