Хотелось бы выделить такой перечень css псевдоклассов и приемов работы с ними, который основан на состоянии элемента INPUT.
:checked псевдокласс
Позволяет писать стили для радио/чек — боксов, которые выделены (checked) в текущий момент.
|
1 |
input:checked { ... } |
Что делать, если нужно написать стили для прямо противоположного случая? Вот пара способов:
|
1 2 3 4 5 6 7 8 |
input { /* здесь размещаете стили для общего случая (в том числе, если элемент not-checked) */ ... } input:checked { /* здесь только для "отмеченного" элемента */ ... } |
Или, используя ещё один полезный псевдокласс — :not
|
1 |
input:not(:checked) { ... } |
:disabled псевдокласс
Если INPUT элемент заблокирован (установлен флаг disabled), то для изменения внешнего вида элемента ваши css могут опираться на псевдокласс :disabled.
|
1 |
input:disabled { ... } |
Практика использования
На практике, для полной кастомизации элементов вроде radio или checkbox прибегают к такому приему, как полная подмена элемента.
Прием заключается в том, что в верстке после input размещают тег label, который ссылается на связанное с ним поле input, но при этом сам input делают невидимым.
|
1 2 |
<input type="checkbox" id="myID" style="display: none" /> <label for="myID"> ... </label> |
C помощью CSS можно «пробросить» состояния input, используя следующий синтаксис:
|
1 |
input:checked + label { ... } |
Внешний вид галочки верстается с помощью label контейнера. Чекбокс становится независимым от платформы, браузера, может иметь любой, требуемый дизайном вид.