Интерактивность
Утилиты для подавления стилизации элементов управления формой.
| Class | Styles |
|---|---|
appearance-none | appearance: none; |
appearance-auto | appearance: auto; |
Используйте appearance-none, чтобы сбросить любую специфическую для браузера стилизацию элемента:
<select> <option>Да</option> <option>Нет</option> <option>Возможно</option></select><div class="grid"> <select class="col-start-1 row-start-1 appearance-none bg-gray-50 dark:bg-gray-800 ..."> <option>Да</option> <option>Нет</option> <option>Возможно</option> </select> <svg class="pointer-events-none col-start-1 row-start-1 ..."> <!-- ... --> </svg></div>Эта утилита часто используется при создании пользовательских компонентов формы.
Используйте appearance-auto, чтобы восстановить стандартную специфическую для браузера стилизацию элемента:
Попробуйте эмулировать `forced-colors: active` в своих инструментах разработчика, чтобы увидеть разницу
<label> <div> <input type="checkbox" class="appearance-none forced-colors:appearance-auto ..." /> <svg class="invisible peer-checked:visible forced-colors:hidden ..."> <!-- ... --> </svg> </div> Возвращает внешний вид по умолчанию</label><label> <div> <input type="checkbox" class="appearance-none ..." /> <svg class="invisible peer-checked:visible ..."> <!-- ... --> </svg> </div> Сохраняет пользовательский внешний вид</label>Это полезно для возврата к стандартным элементам управления браузера в определенных режимах доступности.
Префикс an appearance утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:
<select class="appearance-auto md:appearance-none ..."> <!-- ... --></select>Подробнее об использовании вариантов читайте в документации по вариантам.