:read-write

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

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

css
/* 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

Error: could not find syntax for this item

Ejemplo

HTML

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

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

Specification
HTML Standard
# selector-read-write
Selectors Level 4
# rw-pseudos

Compatibilidad con navegadores

BCD tables only load in the browser

Ver también