Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Pseudoklasa :checked

Email Drukuj PDF

Za pomocą pseudoklasy :checked możemy kontrolować wygląd aktywnych pól formularza typu radio lub checkbox. Jako przykład do dalszych rozważań nad omawianym elementem posłuży nam poniższy formularz. Formatowaniu poddamy pogrubione elementy listingu, czyli pola radio i checkbox.

<h1>Miniankieta</h1>

<form action="formmail.cgi" method="post">

<ul>

<li>Odbiorca ankiety:<br /><input type="text" name="to" value=" Adres poczty elektronicznej jest chroniony przed robotami spamującymi. W przeglądarce musi być włączona obsługa JavaScript, żeby go zobaczyć. " disabled="disabled" /></li>

<li>Imię:<br /><input type="text" name="imie" size="20" /></li>

<li>E-mail:<br /><input type="text" name="e-mail" size="20" /></li>

<li>Płeć: Kobieta: <input type="radio" name="plec" value="kobieta" /> Mężczyzna: <input type="radio" name="plec" value="mezczyzna" /></li>

<li>Płatność: Gotówka: <input type="checkbox" name="platnosc" value="gotowka" /> Karta: <input type="checkbox" name="platnosc" value="karta" /></li>

</ul>

<input type="submit" value="Wyślij" /> <input type="reset" value="Anuluj" />

</form>

Pseudoklasa :checked może zostać wykorzystana w następujący sposób:

input:checked

{

border:1px solid red;

color:green;

width:25px;

height:25px;

background-color:red;

}

Wynikiem działania przykładowego arkusza stylów będzie zmiana rozmiaru, koloru i tła wybranego elementu. Dodatkowo pola radio i checkbox zyskają ramkę w kolorze czerwonym.

<<przykład>>

<html>

<head>

<meta http-equiv="Content-type" content="text/html;charset=ISO-8859-2">

<title>Tytuł Strony WWW</title>

<style type="text/css">

input[type="text"]:enabled

{

background:#C0FFC0;

}

input[type="text"]:disabled

{

background:#FFC0C0;

}

input:checked

{

border:1px solid red;

color:green;

width:25px;

height:25px;

background-color:red;

}     

}

</style>

</head>

<body>

<div class="przyklad">

<h1>Miniankieta</h1>

<form action="formmail.cgi" method="post">

<ul>

<li>Odbiorca ankiety:<br /><input type="text" name="to" value=" Adres poczty elektronicznej jest chroniony przed robotami spamującymi. W przeglądarce musi być włączona obsługa JavaScript, żeby go zobaczyć. " disabled="disabled" /></li>

<li>Imię:<br /><input type="text" name="imie" size="20" /></li>

<li>E-mail:<br /><input type="text" name="e-mail" size="20" /></li>

<li>Płeć: Kobieta: <input type="radio" name="plec" value="kobieta" /> Mężczyzna: <input type="radio" name="plec" value="mezczyzna" /></li>

<li>Płatność: Gotówka: <input type="checkbox" name="platnosc" value="gotowka" /> Karta: <input type="checkbox" name="platnosc" value="karta" /></li>

</ul>

<input type="submit" value="Wyślij" /> <input type="reset" value="Anuluj" />

</form>

</div>

</body>

</html>

<</przykład>>

Generalnie rzecz ujmując, pseudoklasa :checked działa w nowych wersjach Mozilli Firefox, Opery, Safari oraz Chrome i zdecydowanie nie działa w przeglądarce Internet Explorer. Należy jednak pamiętać, że przeglądarki Mozilla Firefox, Safari oraz Chrome w bardzo restrykcyjny sposób podchodzą do formatowania pól formularza i w niniejszym przykładzie zablokowane zostanie stosowanie wszystkich określonych przeze mnie stylów za wyjątkiem rozmiaru. Jedyną przeglądarką, która dokładnie odwzorowuje moje zamiary, jest Opera. Dlatego na rysunku 15.1 przedstawiłem oczekiwany przeze mnie efekt formatowania pół formularza typu radio i checkbox.

Rysunek 15.1. Efekt formatowania pól typu radio i checkbox za pomocą pseudoklasy :checked

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15211482