:read-writeI :read-onlyselektory są dwa zmienność Pseudoklasy mające na celu łatwiejsze formy stylizacji na podstawie disabled, readonlyi contenteditableHTML Atrybuty. Chociaż obsługa przeglądarki nie jest taka zła, różne implementacje są dość wątłe.
Zgodnie z oficjalnymi specyfikacjami CSS, :read-writeselektor będzie pasował do elementu, gdy:
- jest to albo coś,
inputco mareadonlyanidisabledatrybutów. - jest to,
textareaktóre nie mareadonlyanidisabled - to każdy inny edytowalny element (dzięki
contenteditableatrybutowi)
Składnia i przykład
/* 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; )Wsparcie przeglądarki
Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.
Pulpit
| Chrom | Firefox | TO ZNACZY | Brzeg | Safari |
|---|---|---|---|---|
| 36 | 3 * | Nie | 13 | 9 |
Telefon komórkowy / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 9,0-9,2 |
Istnieje zasadnicza różnica między tym, co jest zalecane w specyfikacji, a tym, co faktycznie robią przeglądarki. Na przykład, jeśli będziemy trzymać się specyfikacji, każdy element, który jest edytowalny przez użytkownika, ale jest wyłączony ( disabledlub readonly) lub po prostu nieedytowalny przez użytkownika, powinien być kierowany przez niekwalifikowany :read-onlyselektor.
| Chrom | Firefox | Safari | Opera | |
|---|---|---|---|---|
input | : do odczytu i zapisu | : do odczytu i zapisu | : do odczytu i zapisu | : do odczytu i zapisu |
input(disabled) | : do odczytu i zapisu | : do odczytu i zapisu | : do odczytu i zapisu | : do odczytu i zapisu |
input(readonly) | :tylko czytać | :tylko czytać | :tylko czytać | :tylko czytać |
(contenteditable) | - | : do odczytu i zapisu | - | :tylko czytać |
* | - | :tylko czytać | - | :tylko czytać |
Tymczasem wydaje się, że robi to tylko Firefox i najwyraźniej też niezbyt dobrze, ponieważ traktuje dane disabledwejściowe jako pliki :read-write. Jeśli chodzi o Operę nie oznaczającą contenteditableelementu jako :read-write, to po prostu dlatego, że nie obsługuje contenteditable.