План дій такий:
- Приховуємо виведення чек-боксу;
- Формуємо потрібний зовнішній вигляд чекбоксу у псевдо – елементі label: before;
- Додаткові стилі утворюють зовнішній вигляд поточного статусу.
Галочка (перемикач) або checkbox у html – це просте поле введення input, якому присвоєно атрибут type="checkbox". За допомогою галочки користувач може вибирати кілька рішень із запропонованих йому варіантів. Щоб зробити галочку відміченою за умовчанням, потрібно додати атрибут checked.
Створення «підробленого» чекбоксу виконаємо за допомогою псевдоелементу :: before. За допомогою CSS задаємо йому розміри (в даному випадку 1em x 1em), а потім намалюємо його за допомогою border: 1px solid #adb5bd .