Appearance CSS: Как изменить внешний вид веб-страницы

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

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

button {
  appearance: none;
  background-color: #008CBA;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
}
button:hover {
  background-color: #005480;
}

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

Если мы хотим изменить внешний вид чекбокса, радиокнопки и т.д. с помощью appearance, мы можем использовать следующий код:

/* Скрыть стандартный вид чекбокса */
input[type="checkbox"] {
  appearance: none;
}
/* Установить нашу картинку в качестве фона */
input[type="checkbox"]::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url('/img/checkbox.png') no-repeat;
  margin-right: 10px;
}
/* Добавить просветление фона при наведении */
input[type="checkbox"]:hover::before {
  opacity: 0.7;
}
/* Отображать галочку, если чекбокс отмечен */
input[type="checkbox"]:checked::before {
  background-position: 0 -16px;
}

Здесь мы сначала скрываем стандартный внешний вид чекбокса с помощью значения none для свойства appearance. Затем мы добавляем нашу картинку в качестве фона для чекбокса через псевдоэлемент ::before. При наведении на чекбокс мы добавляем просветление фона. Наконец, если чекбокс отмечен, мы показываем галочку путем изменения позиции фона.

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