:read-writeJa :read-onlyvalitsimet ovat kaksi mutability näennäisluokat pyrkimykset parantaa muoto muotoilu helpottaa perustuu disabled, readonlyja contenteditableHTML määritteet. Vaikka selaintuki ei ole niin huono, erilaiset toteutukset ovat melko hankalia.
Virallisten CSS-määritysten mukaan :read-writevalitsin sopii elementtiin, kun:
- se on joko an
inputjolla eireadonlyoledisabledattribuutteja. - se on a
textareajolla ei olereadonlyeikädisabled - se on mikä tahansa muu muokattava elementti (
contenteditableattribuutin ansiosta )
Syntaksi ja esimerkki
/* 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; )Selaimen tuki
Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.
Työpöytä
| Kromi | Firefox | IE | Reuna | Safari |
|---|---|---|---|---|
| 36 | 3 * | Ei | 13 | 9 |
Matkapuhelin / tabletti
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 9.0-9.2 |
Spesifikaatioissa suositellun ja selainten välillä on suuri ero. Esimerkiksi, jos pidämme kiinni teknisistä tiedoista, pätemättömän valitsimen tulisi kohdistaa jokainen elementti, joka on käyttäjän muokattava mutta poistettu käytöstä ( disabledtai readonly) tai jota ei yksinkertaisesti voi muokata :read-only.
| Kromi | Firefox | Safari | Ooppera | |
|---|---|---|---|---|
input | :lukea kirjoittaa | :lukea kirjoittaa | :lukea kirjoittaa | :lukea kirjoittaa |
input(disabled) | :lukea kirjoittaa | :lukea kirjoittaa | :lukea kirjoittaa | :lukea kirjoittaa |
input(readonly) | :Lue ainoastaan | :Lue ainoastaan | :Lue ainoastaan | :Lue ainoastaan |
(contenteditable) | - | :lukea kirjoittaa | - | :Lue ainoastaan |
* | - | :Lue ainoastaan | - | :Lue ainoastaan |
Sillä välin vain Firefox näyttää tekevän niin, eikä ilmeisesti myöskään liian hyvin, koska se pitää disabledsyötettä :read-write. Mitä tulee siihen, että Opera ei merkitse contenteditableelementtiä :read-write, se johtuu yksinkertaisesti siitä, että se ei tue contenteditable.