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>
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ