Clase pseudo CSS :read-write
The :read-write CSS pseudo-class selects the elements that are editable by the user. Read about the pseudo-class and practice with examples.
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 atributocontenteditableestablecido.
info
El soporte del navegador para la pseudo-clase
:read-writevarí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
Sintaxis
Ejemplo de sintaxis CSS :read-write
:read-write {
css declarations;
}Ejemplo del selector :read-write:
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>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?