CSS 強調色

只需加入一行程式碼，就能在內建的 HTML 表單輸入中加入品牌顏色。

Adam Argyle

Joey Arhar

今天的 HTML 表單元素難以自訂。感覺像是可以選擇很少或完全不自訂樣式，或是重設輸入樣式並從頭開始建構。從頭到尾不斷努力 最終往往比預期的工作多得多這也可能導致遺漏元素狀態的樣式 (不確定，我正在觀察你的情況)，以及造成內建無障礙功能的遺失。如要完整重新建立瀏覽器提供的功能，可能比您要工作做得更多。

accent-color: hotpink;

CSS UI 規格中的 CSS accent-color 可讓您以一行 CSS 為元素上色，透過提供將品牌融入元素的做法省下自訂設定時間。

accent-color 屬性也適用於 color-scheme，讓作者可以同時為淺色和深色元素上色。在以下範例中，使用者已啟用深色主題，因此網頁使用 color-scheme: light dark，並使用相同的 accent-color: hotpink 做為深色主題亮粉色調的控制項。

支援的元素

目前，只有四個元素會透過 accent-color 屬性為：核取方塊、電台、範圍和進度。只要點選 https://accent-color.glitch.me，就能使用淺色和深色配置預覽每個選項。

核取方塊

電台

範圍

進度

保證對比度

為避免現有的無法存取元素，使用 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 推文，系統可能會將這項訊息加入本文！