CSS 強調色

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

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

accent-color: hotpink;

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

瀏覽器支援

  • Chrome:93.
  • Edge:93,
  • Firefox:92。
  • Safari:15.4。

資料來源

強調色示範的淺色主題螢幕截圖,其中
    核取方塊、圓形按鈕、範圍滑桿和進度元素
    也都裝了「熱粉色調」
示範

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

強調色示範的深色主題螢幕截圖,其中
    核取方塊、圓形按鈕、範圍滑桿和進度元素
    也都裝了「熱粉色調」
示範

支援的元素

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

核取方塊

電台

範圍

進度

保證對比

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

並排的 Firefox 和 Chromium 螢幕截圖
  會在各種色調與暗點之間呈現一整組核取方塊。

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

額外:美化設計

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

  • 對焦環
  • 醒目顯示文字
  • 列出標記
  • 箭頭指標 (僅限 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 與選取器搭配使用,可能會 已新增到這篇文章!