Tylko do odczytu :read-only :read-write

Jak zmienić wygląd pól (kontrolek) formularza, które są zablokowane do zapisu?

CSS 3

Pole tylko do odczytu:
```
selektor:read-only { cecha: wartość }
```

Pole do odczytu i do zapisu:

selektor:read-write { cecha: wartość }

Selektorem powinny być pola formularza, którym można przypisać atrybut readonly="..." [zobacz: Wstawianie stylów].
Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach.

Niektóre pola formularza (pole tekstowe, hasło, obszar tekstowy) mogą być zablokowane w taki sposób, że użytkownik nie będzie mógł zmienić ich wartości. Mimo tego, w odróżnieniu od pól całkowicie zablokowanych (z przypisanym atrybutem disabled), wartości z pól zablokowanych do zapisu będą normalnie wysłane z formularzem. Biorąc pod uwagę, że wiele przeglądarek w żaden sposób nie wyróżnia graficznie pól, które zostały oznaczone jako tylko do odczytu, nieświadomy tego użytkownik może bez końca próbować zmienić ich zawartość. Z tego punktu widzenia bardzo ważnym może okazać się graficzne wyróżnienie za pomocą CSS pól tylko do odczytu.

Przykład :read-only :read-write

Po wpisaniu w arkuszu stylów:

input:read-only { border: 1px solid blue }
input:read-write { border: 1px solid red }

a w dowolnym miejscu strony:

<form action="?">
	<input type="text" value="Tylko do odczytu" readonly>
	<input type="text" value="Do odczytu i do zapisu">
</form>

otrzymamy dwie tekstowe kontrolki formularza - pierwsza z niebieskim obramowaniem (zablokowana), a druga z czerwonym (odblokowana):

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
`:read-only`	1 2008-12-11	78 2020-06-30	13 2015-11-12	9 2006-06-20	4 2009-06-08
`:read-write`	1 2008-12-11	78 2020-06-30	13 2015-11-12	9 2006-06-20	4 2009-06-08

Komentarze

Zobacz więcej komentarzy