El :read-writey :read-onlyselectores son dos mutabilidad pseudo-clases destinadas a hacer más fácil peinar forma sobre la base de disabled, readonlyy contenteditableatributos HTML. Si bien el soporte del navegador no es tan malo, las diversas implementaciones son bastante inestables.
De acuerdo con las especificaciones oficiales de CSS, un :read-writeselector coincidirá con un elemento cuando:
- es un
inputque tienereadonlynidisabledatributos. - es un
textareaque no tienereadonlynidisabled - es cualquier otro elemento editable (gracias al
contenteditableatributo)
Sintaxis y ejemplo
/* Any element that is not writable */ :read-only ( ) /*… so you might want to scope it */ input:read-only, textarea:read-only, (contenteditable):read-only ( cursor: not-allowed; ) /* Any enabled text input or enabled textarea or element with the contenteditable attribute */ :read-write ( background: white; cursor: text; )Soporte del navegador
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 36 | 3 * | No | 13 | 9 |
Móvil / Tablet
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 88 | 85 | 81 | 9.0-9.2 |
Existe una gran diferencia entre lo que se recomienda en las especificaciones y lo que hacen realmente los navegadores. Por ejemplo, si nos atenemos a las especificaciones, cada elemento que sea editable por el usuario pero esté deshabilitado ( disabledo readonly) o simplemente no editable por el usuario debe ser dirigido por un :read-onlyselector no calificado .
| Cromo | Firefox | Safari | Ópera | |
|---|---|---|---|---|
input | :leer escribir | :leer escribir | :leer escribir | :leer escribir |
input(disabled) | :leer escribir | :leer escribir | :leer escribir | :leer escribir |
input(readonly) | :solo lectura | :solo lectura | :solo lectura | :solo lectura |
(contenteditable) | - | :leer escribir | - | :solo lectura |
* | - | :solo lectura | - | :solo lectura |
Mientras tanto, solo Firefox parece hacerlo, y aparentemente tampoco demasiado bien, ya que considera una disabledentrada como :read-write. En cuanto a que Opera no etiqueta un contenteditableelemento como :read-write, es simplemente porque no es compatible contenteditable.