Справочник HTML & CSS

appearance

Отключает встроенный вид элементов формы, чтобы оформить их с нуля.

Синтаксис

appearance: none;

Значения

Параметр	Тип	Описание
auto	keyword	Стандартный вид браузера (по умолчанию).
none	keyword	Без встроенного вида — только ваши стили.

Примеры

Флажок, нарисованный целиком через CSS:

<style>
  .check {
    appearance: none;
    width: 20px; height: 20px;
    border: 2px solid teal;
    border-radius: 4px;
    vertical-align: middle;
  }
  .check:checked { background: teal; }
</style>
 
<label><input type="checkbox" class="check" checked> A custom checkbox</label>

Примечания

После appearance: none за все состояния отвечаете вы: отмечен, в фокусе, отключён. Если нужно только поменять цвет, accent-color гораздо проще.

См. также

accent-color — Акцентный цвет встроенных элементов формы: флажков, переключателей, ползунков и индикаторов.
:checked — Срабатывает у отмеченного флажка или переключателя и у выбранного `<option>`.
<select> — Выпадающий список вариантов.

Вопросы и ответы по теме

В учебнике

Оформление форм — Как оформить поля и кнопки — отступы и рамки, состояние фокуса, подсказка, выключенные и ошибочные поля, accent-color и свои флажки через appearance: none.

Спасибо, что читаете!