Требования к дизайну чекбокса §

У web-разработчика должны быть требования к дизайну будущего чекбокса.

Состояния чекбокса

1. Сфокусированный активный чекбокс
2. Неактивный чекбокс
3. Disabled чекбокс
4. Зачеканный активный (сфокусированный)
5. Зачеканный неактивный
6. Зачеканный disabled

Чекбокс §

1. Собственно, чтобы прописать чекбокс, необходимо: input type=“checkbox” Первый

2. Завернем все в label label class=“check” input class=“check__input” type=“checkbox” Первый /label Подробнее о label : 0007 Форма

3. Используем appearence вместо display: none appearance: none; position: absolute; ~webkit appearance : none

4. Зададим класс label; добавим тэг span для стилизации check__box label class=“check option” input class=“check__input” type=“checkbox” span class=“check__box” /span Первый /label

Стилизация чекбокса §

5. Стилизируем check__box Используем:

   1. position: absolute;

   2. width, height

   3. background-color &

   4. background-image: url( )

      .check { padding-left 1.2em } .check__box { margin-left -1.2 em }

      .check__imput::checked + .check__box { background-image: url }

   Состояние фокуса .check__input:focus + .check__box { background-image: url () }

   .check__input:checked:focus + .check__box { background-image: url () }