CSS :read-write Pseudo Clase
La pseudo-clase CSS :read-write selecciona los elementos editables por el usuario. Lee sobre la pseudo-clase y practica con ejemplos.
La pseudo-clase CSS :read-write coincide con cualquier elemento que el usuario puede editar, como un campo de texto en el que puede escribir. Es una pseudo-clase de acción de usuario / entrada: apunta a elementos según su estado editable actual en lugar de un nombre de etiqueta o clase, por lo que puedes dar estilo a "el cuadro en el que el visitante puede escribir" sin añadir marcado adicional.
Esta página explica qué cuenta como elemento de lectura-escritura, la sintaxis, un ejemplo funcional, su contraparte de solo lectura y cómo :read-write encaja con pseudo-clases de formulario relacionadas.
Qué cuenta como lectura-escritura
Un elemento coincide con :read-write cuando es actualmente editable. Eso incluye:
- Elementos
<input>cuyo tipo acepta texto (text, search, url, email, password, number, etc.) que no seanreadonlynidisabled. - Elementos
<textarea>que no seanreadonlynidisabled. - Cualquier otro elemento que lleve el atributo
contenteditable(p. ej. un<div contenteditable>), lo que hace que contenido estático se vuelva editable.
El caso opuesto — un campo deshabilitado, un campo readonly, o cualquier elemento no editable como un párrafo — coincide con :read-only en su lugar. Cada elemento es uno u otro, por lo que :read-only y :read-write juntos cubren todo el documento.
Cuándo usarlo
Recurre a :read-write cuando quieras una señal visual de que un elemento es interactivo:
- Dale a los campos editables un fondo o borde diferenciado para que los usuarios vean de inmediato dónde pueden escribir.
- Combínalo con
:read-onlypara atenuar los campos bloqueados (por ejemplo, un formulario de perfil donde el correo electrónico es fijo pero el nombre visible es editable). - Dale estilo a una región de texto enriquecido
contenteditablede la misma manera que las entradas nativas para un aspecto consistente.
La compatibilidad del navegador con la pseudo-clase :read-write es amplia en los navegadores modernos, pero el comportamiento de estilo puede diferir. El estado editable real del elemento siempre es correcto — :read-write solo controla si se aplican tus estilos — así que nunca dependas de ella para algo que no sea presentación.
El selector :read-only es la contraparte del selector :read-write. Selecciona cada elemento que no coincide con :read-write.
Versión
Sintaxis
Ejemplo de sintaxis CSS :read-write
:read-write {
css declarations;
}Aquí css declarations son las reglas de estilo que se aplican a cada elemento editable de la página. Normalmente acotarás la regla (por ejemplo input:read-write) para que no afecte también a las regiones contenteditable que prefieras dejar sin estilos.
Ejemplo del selector :read-write
En el ejemplo siguiente, el primer input es editable, por lo que se vuelve verde mediante :read-write. El segundo input es readonly, por lo que le aplica la regla :read-only y aparece en gris.
Ejemplo de código CSS :read-write
<!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>Dar estilo a una región contenteditable
:read-write no se limita a los campos de formulario. Cualquier elemento con el atributo contenteditable se vuelve editable y, por tanto, coincide con :read-write, por lo que puedes darle la misma apariencia que una entrada real:
<!DOCTYPE html>
<html>
<head>
<title>contenteditable + :read-write</title>
<style>
div:read-write {
border: 1px dashed #4caf50;
padding: 8px;
outline: none;
}
</style>
</head>
<body>
<p>Click the box below and start typing:</p>
<div contenteditable>This text is editable.</div>
</body>
</html>Dado que el <div> lleva contenteditable, la regla div:read-write se aplica y el cuadro obtiene el borde discontinuo. Elimina el atributo y la regla ya no coincide.
Compatibilidad con navegadores
| Navegador | Soporte |
|---|---|
| Chrome | Sí |
| Firefox | Sí |
| Safari | Sí |
| Edge | Sí |
| Opera | Sí |
Selectores relacionados
:read-only— la contraparte que coincide con cada elemento no editable.:disabledy:enabled— coinciden con controles de formulario según su estado de deshabilitado.:requiredy:optional— coinciden con inputs según si deben ser rellenados o no.