Как изменить вид чекбокса и радиокнопки
Короткий ответ
Цвет отмеченного флажка и переключателя меняет одно свойство accent-color:
<style>
input { accent-color: rebeccapurple; width: 18px; height: 18px; }
</style>
<label><input type="checkbox" checked> Send me news</label><br>
<label><input type="radio" name="plan" checked> Monthly</label>
<label><input type="radio" name="plan"> Yearly</label>Ширина и высота увеличивают сам флажок — по умолчанию он мелкий, и по нему трудно попасть пальцем.
Полностью свой вид
appearance: none убирает стандартную отрисовку, и элемент можно нарисовать с нуля. Отметку показывает псевдокласс :checked:
<style>
.box { appearance: none; width: 20px; height: 20px; margin: 0; border: 2px solid gray; border-radius: 6px; display: inline-grid; place-content: center; vertical-align: middle; }
.box:checked { border-color: seagreen; background: seagreen; }
.box:checked::before { content: "✓"; color: white; font-size: 14px; }
.box:focus-visible { outline: 2px solid orange; outline-offset: 2px; }
</style>
<label><input class="box" type="checkbox" checked> I agree</label>Элемент остаётся настоящим чекбоксом: работает с клавиатуры, отправляется с формой и понятен скринридеру.
Частая ошибка
Чекбокс прячут через display: none, а рядом рисуют картинку-флажок. Такой флажок нельзя выбрать клавишей Tab и переключить пробелом, а скринридер его не видит. Используйте appearance: none на самом <input> — или прячьте его визуально, но не убирайте.
Функции из этого ответа
- <input type="checkbox"> — Флажок (`checkbox`) — независимый выбор «да/нет»; переключатель (`radio`) — один вариант из группы.
- accent-color — Акцентный цвет встроенных элементов формы: флажков, переключателей, ползунков и индикаторов.
- appearance — Отключает встроенный вид элементов формы, чтобы оформить их с нуля.
- :checked — Срабатывает у отмеченного флажка или переключателя и у выбранного `<option>`.
- <label> — Подпись к полю формы.