--- title: ':read-write' slug: 'Web/CSS/:read-write' tags: - CSS - Layout - Pseudo-class - Reference - Web translation_of: 'Web/CSS/:read-write' ---
{{CSSRef}}

La pseudo-class CSS :read-write representa un element (com ara una entrada de text) que l'usuari pot editar.

/* Selecciona qualsevol element <input> que sigui editable Compatible amb Firefox amb un prefix */
input:-moz-read-write {
  background-color: #bbf;
}

/* Compatible amb Blink / WebKit / Edge sense un prefix */
input:read-write {
  background-color: #bbf;
}

Nota: Aquest selector no només selecciona el text {{htmlElement("input")}} s; seleccionarà qualsevol element que l'usuari pugui editar, com ara un element {{htmlelement("p")}} amb {{htmlattrxref("contenteditable")}} establert en ell.

Sintaxi

{{csssyntax}}

Exemple

HTML

<input type="text" value="Type whatever you want here.">
<input type="text" value="This is a read-only field." readonly>
<p>This is a normal paragraph.</p>
<p contenteditable="true">You can edit this paragraph!</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; }

Resultat

{{EmbedLiveSample("Example")}}

Especificacions

Especificació Estat Comentari
{{ SpecName('HTML WHATWG', '#selector-read-write', ':read-write') }} {{ Spec2('HTML WHATWG') }} Sense canvis.
{{ SpecName('HTML5 W3C', '#selector-read-write', ':read-write') }} {{ Spec2('HTML5 W3C') }} Defineix la semàntica respecte a HTML i la validació de restriccions.
{{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-write') }} {{ Spec2('CSS4 Selectors') }} Defineix la pseudo-classe, però no la semàntica associada.

Navegadors compatibles

{{Compat("css.selectors.read-write")}}

Vegeu també