: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 # selector-read-write |
Selectors Level 4 # read-write-pseudo |
Compatibilidad con navegadores
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
:read-write |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Requires a vendor prefix or different name for use.
- Has more compatibility info.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Ver también
:read-only
- Atributo HTML
contenteditable