4.1 Псевдоклас :checked
Псевдокласи форми в CSS надають можливості для стилізації елементів форми залежно від їхнього стану. Ці псевдокласи дозволяють створювати інтерактивні та доступні форми, покращуючи інтерфейс і досвід користувача. Розглянемо детальніше псевдокласи :checked, :disabled, :enabled і :invalid.
Псевдоклас :checked застосовується до елементів форми, які перебувають у стані "обрано". Це стосується чекбоксів (<input type="checkbox">), радіокнопок (<input type="radio">) та опцій (<option>).
Синтаксис:
селектор:checked {
властивості: значення;
}
Приклад використання
У цьому прикладі обрані чекбокси, радіокнопки та опції отримують відповідний колір фону, коли перебувають у стані "обрано":
/* Стилізація обраного чекбоксу */
input[type="checkbox"]:checked {
background-color: #3498db;
}
/* Стилізація обраної радіокнопки */
input[type="radio"]:checked {
background-color: #2ecc71;
}
/* Стилізація обраної опції */
option:checked {
background-color: #e74c3c;
}
4.2 Псевдоклас :disabled
Псевдоклас :disabled застосовується до елементів форми, які знаходяться у вимкненому стані. Це корисно для стилізації елементів, які тимчасово недоступні для взаємодії.
Синтаксис:
селектор:disabled {
властивості: значення;
}
Приклад використання
У цьому прикладі вимкнені поля вводу та кнопки отримують відповідний колір фону, рамки та тексту, а також змінюють курсор на "заборонено":
/* Стилізація вимкненого поля вводу */
input:disabled {
background-color: #f0f0f0;
border-color: #ccc;
color: #888;
}
/* Стилізація вимкненої кнопки */
button:disabled {
background-color: #d0d0d0;
color: #777;
cursor: not-allowed;
}
4.3 Псевдоклас :enabled
Псевдоклас :enabled застосовується до елементів форми, які знаходяться у ввімкненому стані. Це дозволяє стилізувати елементи, доступні для взаємодії.
Синтаксис:
селектор:enabled {
властивості: значення;
}
Приклад використання
У цьому прикладі ввімкнені поля вводу та кнопки отримують відповідний колір фону, рамки та тексту, а також змінюють курсор на "вказівник":
/* Стилізація ввімкненого поля вводу */
input:enabled {
background-color: #fff;
border-color: #3498db;
}
/* Стилізація ввімкненої кнопки */
button:enabled {
background-color: #2ecc71;
color: white;
cursor: pointer;
}
4.4 Псевдоклас :invalid
Псевдоклас :invalid застосовується до елементів форми, які не пройшли валідацію. Це дозволяє стилізувати поля вводу, які містять некоректні дані.
Синтаксис:
селектор:invalid {
властивості: значення;
}
Приклад використання
У цьому прикладі некоректні поля вводу та текстові поля отримують відповідний колір рамки та фону, щоб візуально показати, що дані не пройшли валідацію:
/* Стилізація некоректного поля вводу */
input:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
/* Стилізація некоректного текстового поля */
textarea:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
4.5 Приклад повної реалізації
/* Стилізація обраного чекбоксу */
input[type="checkbox"]:checked {
background-color: #3498db;
}
/* Стилізація обраної радіокнопки */
input[type="radio"]:checked {
background-color: #2ecc71;
}
/* Стилізація вимкненого поля вводу */
input:disabled {
background-color: #f0f0f0;
border-color: #ccc;
color: #888;
}
/* Стилізація вимкненої кнопки */
button:disabled {
background-color: #d0d0d0;
color: #777;
cursor: not-allowed;
}
/* Стилізація ввімкненого поля вводу */
input:enabled {
background-color: #fff;
border-color: #3498db;
}
/* Стилізація ввімкненої кнопки */
button:enabled {
background-color: #2ecc71;
color: white;
cursor: pointer;
}
/* Стилізація некоректного поля вводу */
input:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
/* Стилізація некоректного текстового поля */
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>Приклад псевдокласів форми</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="Enter your name" required>
<br>
<input type="email" placeholder="Enter your email" required>
<br>
<button type="submit">Submit</button>
<button type="button" disabled>Disabled Button</button>
</form>
</body>
</html>
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ