Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 Когда я только начинал изучать веб-разработку, для меня совсем неочевидным было, как сделать кастомные чекбоксы, потому что просто так стилизовать мы их не можем.

2 Поэтому хочу рассказать, как это работает. Вот пример конечного результата:

3 <h2>Содержание</h2>

4 <ul><li><a>Подготовительный этап:</a></li>

5 <li><a>Алгоритм:</a></li>

6 <li><a>Шаг 4</a></li>

7 </ul><h2>Подготовительный этап:</h2>

8 Поскольку я не знаю уровень владения HTML и CSS у читателя статьи, я посчитал нужным упомянуть 3 момента:

9 <ol><li>Селекторэлемент1~элемент2(пример:div~p) выберет все элементыp, находящиеся в коде за элементомdiv

10 </li>

11 <li>Labelиinputможно связывать друг с другом, чтобыinput[type='checkbox']реагировал на нажатие наlabel.Еслиinputнаходится внутриlabel, то он будет менять свое состояние при клике наlabel(становиться

12 и наоборот). Подробнее об этом вот<a>здесь</a>.</li>

13 <li>Вид в отжатом/нажатом состоянии будет менятьdivс классом.custom-check-icon

14 </li>

15 </ol><h2>Алгоритм:</h2>

16 <h3>Шаг 1</h3>

17 Сначала создадим верстку без стилей: у нас будетdiv-обертка,а внутриcheckboxи нужный нам текст. Добавим стилей чтобы выровнять все правильным образом:

18 HTML:

19 Жанры

20 CSS:

21 Результат:

22 <h3>Шаг 2</h3>

23 Кастомизируем конечный вид чекбокса с помощью псевдоэлемента::before:

24 CSS:

25 Результат:

26 <h3>Шаг 3</h3>

27 Теперь сделаем таким образом, чтобы наш маленький фиолетовый квадратик отображался только в том случае, когда нашinput:checked:

28 CSS:

29 Результат:

30 <h2>Шаг 4</h2>

31 Все что нам остается - скрыть нашinput:

32 CSS:

33 Конечный результат:

34 <h3>Итог</h3>

35 Вот таким образом можно сделать кастомный чекбокс. Хочу отметить, что это всего лишь один из вариантов, они могут: отличаться, например,inputможет быть не внутриlabel,а рядом, а также вместо псевдоэлемента::beforeможно использоватьbackground-image(именно так можно сделать чекбокс с превьюшки поста)