Tailwind CSS - 外观

Tailwind CSS **外观** 提供预定义的类来控制各种元素（如输入字段、按钮等）的样式，允许您修改其外观。

Tailwind CSS 外观类

以下是提供更改元素样式选项的 Tailwind CSS 外观类的列表。

类	CSS 属性
appearance-none	appearance: none;
appearance-auto	appearance: auto;

Tailwind CSS 外观类的功能

**appearance-none:** 此类删除默认浏览器样式，允许自定义设计。
**appearance-auto:** 此类将元素恢复到默认浏览器样式。

Tailwind CSS 外观类示例

以下是 Tailwind CSS 外观类的示例，展示了如何调整和控制元素的样式。

样式化复选框外观

此示例展示了如何使用 Tailwind CSS 外观类来设置复选框的样式。第一个示例显示了默认的复选框外观，而第二个示例则使用 Tailwind CSS 类对自定义样式的复选框进行了定制设计。

示例

  
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Appearance
    </h2>
    <h3 class="font-bold mb-4">
        Default Checkbox Appearance
    </h3>
    <label class="block mb-4">
        <input type="checkbox" class="form-checkbox">
        <span class="ml-2">Default Checkbox</span>
    </label>
    <h3 class="font-bold mb-4">
        Custom Checkbox Appearance
    </h3>
    <label class="block mb-4 flex">
        <input type="checkbox" class="appearance-none border-2 
            border-teal-600 checked:bg-blue-500 w-6 h-6">
        <span class="ml-2">Custom Checkbox</span>
    </label>
</body>

</html>

改进文件输入外观

此示例展示了如何使用 Tailwind CSS 外观类通过删除默认浏览器设计并应用自定义样式来设置文件输入的样式。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Appearance Class 
    </h2>
    <h3 class="font-bold mb-4">
        Default File Input Appearance
    </h3>
    <label class="block mb-4">
        <input type="file" class="form-file"> 
    </label>
    <h3 class="font-bold mb-4">
        Custom File Input Appearance
    </h3>
    <label class="block mb-4"> 
        <input type="file" class="appearance-none 
            border-2 border-teal-600 p-2"> 
    </label>
</body>

</html>

应用自动和自定义外观

此示例展示了 appearance-auto 如何将默认浏览器样式应用于范围输入，而 appearance-none 如何从范围输入中删除这些样式以进行自定义设计。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Appearance 
    </h2>
    <h3 class="font-bold mb-4">
        Auto Appearance Range Input
    </h3>
    <label class="block mb-4">
        <input type="range" 
            class="appearance-auto w-full">
    </label>    
    <h3 class="font-bold mb-4">
        Custom Range Input Appearance
    </h3>
    <label class="block mb-4">
        <input type="range" class="appearance-none 
            bg-gray-300 accent-teal-500 w-full">
    </label>
</body>

</html>

打印页面