1. 交互性
  2. 外观

交互性

外观

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

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

示例

移除默认外观

使用 appearance-none 重置元素上的任何浏览器特定样式

已应用默认浏览器样式
移除默认浏览器样式
<select>
<option>Yes</option>
<option>No</option>
<option>Maybe</option>
</select>
<div class="grid">
<select class="col-start-1 row-start-1 appearance-none bg-gray-50 dark:bg-gray-800 ...">
<option>Yes</option>
<option>No</option>
<option>Maybe</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>
Falls back to default appearance
</label>
<label>
<div>
<input type="checkbox" class="appearance-none ..." />
<svg class="invisible peer-checked:visible ...">
<!-- ... -->
</svg>
</div>
Keeps custom appearance
</label>

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

响应式设计

前缀an appearance 实用工具 使用断点变体(如 md:)仅在以下情况下应用该实用工具中等 屏幕尺寸及以上

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

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

版权所有 © 2025 Tailwind Labs Inc.·商标政策