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>

列印頁面