4.1 Pseudoklasa :checked
Pseudoklasy formularzy w CSS dają możliwość stylizacji elementów formularza w zależności od ich stanu. Te pseudoklasy pozwalają tworzyć interaktywne i dostępne formularze, poprawiając interfejs użytkownika i doświadczenie. Zajmijmy się szczegółowo pseudoklasami :checked, :disabled, :enabled i :invalid.
Pseudoklasa :checked jest stosowana do elementów formularza, które są w stanie "wybrane". Dotyczy to pól wyboru (<input type="checkbox">), przycisków radiowych (<input type="radio">) i opcji (<option>).
Składnia:
selektor:checked {
właściwości: wartości;
}
Przykład użycia
W tym przykładzie wybrane pola wyboru, przyciski radiowe i opcje otrzymują odpowiedni kolor tła, kiedy są w stanie "wybrane":
/* Stylizacja wybranego pola wyboru */
input[type="checkbox"]:checked {
background-color: #3498db;
}
/* Stylizacja wybranego przycisku radiowego */
input[type="radio"]:checked {
background-color: #2ecc71;
}
/* Stylizacja wybranej opcji */
option:checked {
background-color: #e74c3c;
}
4.2 Pseudoklasa :disabled
Pseudoklasa :disabled jest stosowana do elementów formularza, które są w stanie wyłączonym. Jest to przydatne do stylizacji elementów, które są tymczasowo niedostępne do interakcji.
Składnia:
selektor:disabled {
właściwości: wartości;
}
Przykład użycia
W tym przykładzie wyłączone pola wejścia i przyciski otrzymują odpowiedni kolor tła, obramowania i tekstu, a także zmieniają kursor na "zakazane":
/* Stylizacja wyłączonego pola wejścia */
input:disabled {
background-color: #f0f0f0;
border-color: #ccc;
color: #888;
}
/* Stylizacja wyłączonego przycisku */
button:disabled {
background-color: #d0d0d0;
color: #777;
cursor: not-allowed;
}
4.3 Pseudoklasa :enabled
Pseudoklasa :enabled jest stosowana do elementów formularza, które są w stanie włączonym. Pozwala to stylizować elementy dostępne do interakcji.
Składnia:
selektor:enabled {
właściwości: wartości;
}
Przykład użycia
W tym przykładzie włączone pola wejścia i przyciski otrzymują odpowiedni kolor tła, obramowania i tekstu, a także zmieniają kursor na "wskaźnik":
/* Stylizacja włączonego pola wejścia */
input:enabled {
background-color: #fff;
border-color: #3498db;
}
/* Stylizacja włączonego przycisku */
button:enabled {
background-color: #2ecc71;
color: white;
cursor: pointer;
}
4.4 Pseudoklasa :invalid
Pseudoklasa :invalid jest stosowana do elementów formularza, które nie przeszły walidacji. Pozwala to stylizować pola wejścia, które zawierają nieprawidłowe dane.
Składnia:
selektor:invalid {
właściwości: wartości;
}
Przykład użycia
W tym przykładzie nieprawidłowe pola wejścia i pola tekstowe otrzymują odpowiedni kolor obramowania i tła, aby wizualnie pokazać, że dane nie przeszły walidacji:
/* Stylizacja nieprawidłowego pola wejścia */
input:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
/* Stylizacja nieprawidłowego pola tekstowego */
textarea:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
4.5 Przykład pełnej implementacji
/* Stylizacja wybranego pola wyboru */
input[type="checkbox"]:checked {
background-color: #3498db;
}
/* Stylizacja wybranego przycisku radiowego */
input[type="radio"]:checked {
background-color: #2ecc71;
}
/* Stylizacja wyłączonego pola wejścia */
input:disabled {
background-color: #f0f0f0;
border-color: #ccc;
color: #888;
}
/* Stylizacja wyłączonego przycisku */
button:disabled {
background-color: #d0d0d0;
color: #777;
cursor: not-allowed;
}
/* Stylizacja włączonego pola wejścia */
input:enabled {
background-color: #fff;
border-color: #3498db;
}
/* Stylizacja włączonego przycisku */
button:enabled {
background-color: #2ecc71;
color: white;
cursor: pointer;
}
/* Stylizacja nieprawidłowego pola wejścia */
input:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
/* Stylizacja nieprawidłowego pola tekstowego */
textarea:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Przykład pseudoklas formularzy</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form>
<label>
<input type="checkbox" name="option1"> Option 1
</label>
<br>
<label>
<input type="radio" name="choice" value="1"> Choice 1
</label>
<label>
<input type="radio" name="choice" value="2"> Choice 2
</label>
<br>
<input type="text" placeholder="Wpisz swoje imię" required>
<br>
<input type="email" placeholder="Wpisz swój email" required>
<br>
<button type="submit">Wyślij</button>
<button type="button" disabled>Wyłączony przycisk</button>
</form>
</body>
</html>
GO TO FULL VERSION