Сброс стиля

Класс appearance-none задаёт appearance: none: браузер перестаёт рисовать элемент формы по-своему — без стрелки у списка, без системной рамки у поля поиска, без галочки у флажка. Берите его, когда элемент оформляется целиком классами Framework.

Пример

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

HTML

<div class="grid grid-col-1 sm:grid-col-2 gap-4">
  <div class="flex flex-col gap-1 items-start">
    <select class="w-full" aria-label="Список без класса">
      <option>Москва</option>
      <option>Казань</option>
    </select>
    <code class="text-1/2 color-on-surface-variant">без класса</code>
  </div>
  <div class="flex flex-col gap-1 items-start">
    <select class="appearance-none w-full p-x-2 p-y-1 border border-outline radius-ui bg-surface color-on-surface" aria-label="Список с appearance-none">
      <option>Москва</option>
      <option>Казань</option>
    </select>
    <code class="text-1/2 color-on-surface-variant">appearance-none</code>
  </div>
  <div class="flex flex-col gap-1 items-start">
    <input type="checkbox" class="w-c0 h-c0" checked aria-label="Флажок без класса">
    <code class="text-1/2 color-on-surface-variant">без класса</code>
  </div>
  <div class="flex flex-col gap-1 items-start">
    <input type="checkbox" class="appearance-none w-c0 h-c0 border border-2 border-primary radius-ui bg-surface" checked aria-label="Флажок с appearance-none">
    <code class="text-1/2 color-on-surface-variant">appearance-none</code>
  </div>
</div>

Классы

Класс	CSS	Значения
`appearance-none`	`appearance: none`	—

Условия (что это): ширина экрана — нет; состояния — нет.

Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.

Применение

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

HTML

<select class="appearance-none w-full p-x-2 p-y-1 border border-outline radius-ui bg-surface color-on-surface">
  <option>Москва</option>
  <option>Казань</option>
</select>

Списку без стрелки стоит вернуть признак раскрытия — например, значок справа от поля. Флажку и переключателю после сброса нужны свои стили для отмеченного, фокусного и недоступного состояния.

Ограничения

Класс один и не имеет пары, возвращающей оформление браузера, и префиксов ширины экрана или состояния.
Сброс убирает и видимые признаки состояния — галочку, точку, стрелку. Без замены пользователь не видит, что выбрано.
Цвет отметки, заданный через accent-*, на элемент с appearance-none не действует.

Навигация

Главное

Документация

Содержание