CSS - accent-color 屬性

CSS 的 **accent-color** 屬性決定了可應用於使用者介面控制元件（例如單選按鈕、複選框、按鈕等）的強調色。此屬性提供了靈活地為使用者介面控制元件分配使用者選擇的顏色的功能。

語法

accent-color: auto | color | initial | inherit;

值	描述
auto	瀏覽器選擇強調色。預設值。
color	指定要使用的顏色。可以使用不同的格式（rgb、十六進位制、顏色名稱等）。
initial	將屬性設定為其初始值
inherit	從父元素繼承屬性

CSS 強調色屬性示例

下面的示例將使用不同的值解釋 **accent-color** 屬性。

設定預設顏色

為了允許瀏覽器為使用者介面控制元件提供顏色，可以使用 auto 值。這在下面的示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        input {
            accent-color: auto;
        }
    </style>
</head>

<body>
    <h2>CSS accent-color property</h2>
    <div>
        <input type="checkbox" id="check" checked>
        <label for="check">accent-color: auto</label>
    </div>
    <div>
        <input type="radio" id="clicked" checked>
        <label for="clicked">accent-color:auto</label>
    </div>
    <div>

        <input type="range" id="pull">
        <label for="pull">accent-color:auto</label>
    </div>

</body>

</html>

自定義顏色

要將我們選擇的顏色應用於使用者介面控制元件，我們可以使用不同的格式指定顏色。這在下面的示例中顯示。使用了三種不同的格式——顏色名稱、顏色 rgb 值和顏色十六進位制值。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        input[type=radio] {
            accent-color: #ffa500;
        }

        input[type=range] {
            accent-color: rgb(55, 255, 0);
        }

        progress {
            accent-color: red;
        }
    </style>
</head>

<body>
    <h2>CSS accent-color property</h2>
    <h3>accent-color for radio buttons</h3>
    <input type="radio" id="radio1" name="gender" checked>
    <label for="radio1">Male</label></br>
    <input type="radio" id="radio2" name="gender">
    <label for="radio2">Female</label>

    <h3>accent-color for a range</h3>
    <label for="ran">Range</label></br>
    <input type="range" id="ran" name="range_val" min="0" max="5">

    <h3>accent-color for a progress</h3>
    <label for="prog">Progress</label></br>
    <progress id="prog" name="prog_val" value="60" max="100">60%</progress>
</body>

</html>

支援的瀏覽器

元素
accent-color	93.0	93.0	92.0	15.4	79.0

css_properties_reference.htm

列印頁面