Настройка внешнего вида веб-страниц с помощью CSS appearance

CSS appearance - это свойство CSS, которое определяет внешний вид элемента управления формы. Позволяет изменять стандартный пользовательский интерфейс элементов формы на территории браузера, таких как поля ввода, кнопки, флажки и т.д.

Например, если вы используете свойство appearance для изменения значка флажка, он не будет выглядеть так, как исходно запрограммировано для ОС, вместо этого вы настроите его так, чтобы он соответствовал вашему веб-дизайну.

Приведем простой пример изменения внешнего вида переключателя:

css
.toggle {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 60px;
  height: 34px;
  background-color: #e6e6e6;
  border-radius: 60px;
  position: relative;
  transition: background-color .4s;
}
.toggle:before {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #f2f2f2;
  top: 2px;
  left: 2px;
  transition: left .4s;
}
.toggle:checked:before {
  left: 28px;
  background-color: #8bc34a;
}

В данном коде мы скрыли встроенный вид переключателя, используя свойство appearance. Затем мы создали свой стиль для внешней оболочки переключателя, включая состояния его фона и радиус границы.

Чтобы изменить позиционирование внутреннего элемента, мы использовали псевдоэлемент :before. Выбранный псевдоэлемент изменяет свою позицию, цвет фона и размер при клике на переключатель путем использования: checked

Вывод: Свойство appearance открывает веб-разработчикам большие возможности для настройки собственного интерфейса форм. Оно позволяет изменить встроенный вид элементов управления формочного интерфейса, так что они могут соответствовать вашему макету дизайна.