Lzh on GitHub

appearance

用于抑制原生表单控件样式的工具类。

快速参考

类名样式
appearance-noneappearance: none;
appearance-autoappearance: auto;

示例

移除默认外观

使用 appearance-none 可以重置元素上所有浏览器特有的样式：

Default browser styles applied
Remove default browser styles
<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>

这对于在某些辅助功能模式下恢复标准浏览器控件很有用。

响应式设计

在 appearance 工具类前加上 md: 等断点变体，使其仅在中等屏幕尺寸及以上应用：

<select class="appearance-auto md:appearance-none ...">
  <!-- ... -->
</select>

在 变体文档 中了解更多关于使用变体的信息。