CSS 強調色

加入一行程式碼，在內建的 HTML 表單輸入內容中呈現品牌顏色。

Adam Argyle

Joey Arhar

目前的 HTML 表單元素難以執行 自訂。感覺就像是 您可以選擇很少或沒有自訂樣式 或是重設輸入樣式 從頭開始建構從零開始建構內容，給起來更方便 表現比預期的好也可能導致元素狀態忘記樣式 (不確定、 據我瞭解，你無法再使用內建的無障礙功能。 完整重建瀏覽器提供的功能 可能超乎您的想像

accent-color: hotpink;

CSS UI 中的 CSS accent-color 規格 加入，省下自訂作業的麻煩 可將你的品牌融入內容

瀏覽器支援

• 93 分
• 93 分
• 92 分
• 15.4

資料來源

示範

accent-color 屬性也適用於 color-scheme，可讓作者同時對兩者 淺色和深色元素 以下範例為使用者啟用深色主題，網頁採用 color-scheme: light dark，並針對深色使用相同的 accent-color: hotpink 主題熱粉色調控制選項

示範

支援的元素

目前只有四個元素會透過 accent-color 屬性進行色調： 核取方塊、圓形按鈕、範圍和 進度：您可以在這裡預覽各項內容 https://accent-color.glitch.me 的亮度， 以及深色色彩配置

警告： 如果下列示範元素的顏色相同，表示瀏覽器尚未支援 accent-color。

核取方塊

電台

範圍

進度

保證對比

為避免現有現有元素無法存取，請使用 accent-color 的瀏覽器 需要決定符合條件的 顏色，以便與自訂報表搭配使用 口音。以下是 Chrome 94 (左側) 和 Firefox 92 的螢幕擷取畫面 每晚 (右側) 的演算法不同：

為了避免這類情況發生，最重要的是信任瀏覽器。 提供品牌顏色，且信任它能協助你做出明智的決定。

注意： 瀏覽器不會變更深色主題中的色彩。

額外：美化設計

您可能會想知道如何為超過這四個表單元素加上色調嗎？請參考 著色的最小沙箱：

• 對焦環
• 醒目顯示文字
• 列出標記
• 箭頭指標 (僅限 Webkit)
• 捲軸 (僅限 Firefox)

html {
  --brand: hotpink;
  scrollbar-color: hotpink Canvas;
}

:root { accent-color: var(--brand); }
:focus-visible { outline-color: var(--brand); }
::selection { background-color: var(--brand); }
::marker { color: var(--brand); }

:is(
  ::-webkit-calendar-picker-indicator,
  ::-webkit-clear-button,
  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button
) {
  color: var(--brand);
}

未來潛力

規格未將 accent-color 的套用範圍限制為四個元素 (如本文所述)，日後我們會添加更多支援服務。這類元素包括 已選取 <select> 中的<option>，可能以 accent-color。

您還想在網路上新增哪些資料？推文 將 @argyleink 與選取器搭配使用，可能會 已新增到這篇文章！