只需加入一行程式碼,就能在內建的 HTML 表單輸入中加入品牌顏色。
今天的 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 推文,系統可能會將這項訊息加入本文!