外观 - 交互 - Tailwind CSS 框架

外观

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

类名样式

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

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>

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

外观

示例

移除默认外观

恢复默认外观

响应式设计

本页内容