Przejdź do treści

Selektory pseudoklas

Tylko do odczytu

(CSS 3 - interpretuje Opera, Chrome)

  1. Pole tylko do odczytu:
    selektor:read-only { cecha: wartość }
  2. 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="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:

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="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):

Komentarze

Zobacz więcej komentarzy