Clase pseudo CSS :read-write

El selector :read-write selecciona los elementos que pueden ser editados por el usuario.

Los elementos editables incluyen:

<input> que no son de solo lectura y que no están deshabilitados.
<textarea> que no son de solo lectura ni están deshabilitados.
Un elemento que no sea <input> ni <textarea> y que tenga el atributo contenteditable establecido.

INFO

El soporte del navegador para la pseudo-clase :read-write varía. Aunque el estado editable real del elemento permanece igual, algunos navegadores pueden no aplicar los estilos asociados o pueden tratar la pseudo-clase de manera diferente.

El selector :read-only es el contraparte del selector :read-write. Selecciona todos los elementos que no coinciden con :read-write.

Versión

HTML5

Selectors Level 4

Sintaxis

Ejemplo de sintaxis CSS :read-write

css

:read-write {
  css declarations;
}

Ejemplo del selector :read-write:

Ejemplo de código CSS :read-write

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input {
        margin-bottom: 10px;
        border: 1px solid #ddd;
        padding: 5px;
      }
      input:read-only {
        background-color: #ccc;
      }
      :read-write {
        background: lightgreen;
      }
    </style>
  </head>
  <body>
    <h2>:read-write selector example</h2>
    <form>
      <div>
        <label for="read-write">Example1</label>
        <input value="read-write input" id="read-write" />
      </div>
      <div>
        <label for="read-only">Example2</label>
        <input readonly value="read-only input" id="read-only" />
      </div>
    </form>
  </body>
</html>

Try it Yourself »

Compatibilidad con navegadores

Navegador	Compatibilidad
Chrome	Sí
Firefox	Sí
Safari	Sí
Edge	Sí
Opera	Sí

Práctica

¿Qué puedes aprender de la sección 'lectura/escritura' en W3Docs?

Cómo colorear el fondo de una página web en CSSCómo leer y escribir declaraciones CSSConceptos básicos de JavaScript y HTMLSintaxis general de las reglas CSSCómo integrar CSS en un proyecto HTML existente

Clase pseudo CSS :read-write ​

Versión ​

Sintaxis ​

Ejemplo del selector :read-write: ​