設定瀏覽器生成 UI 的主題

大多數瀏覽器產生的 UI 都可以使用 CSS 進行一定程度的自訂。即使需要新式功能，在舊版瀏覽器中也能正常降級，因此通常不需要 polyfill 或備用方案。

重新建立瀏覽器 UI (表單控制項、捲軸、選取項目、錯誤訊息等) 之前，請先確認：

1. 即使使用新式 CSS，瀏覽器 UI 也無法充分自訂，滿足您的需求
2. 所需的自訂功能非常重要，足以證明重新建立內建 UI 的取捨是合理的，最明顯的是失去原生 UI 免費提供的無障礙語意、鍵盤處理、IME 和 AT 整合。

可行的自訂範例：

• 使用 ::selection 自訂醒目顯示文字的顏色。
• 請勿將 user-select: none 套用至內容文字，否則會破壞複製貼上、翻譯工具和輔助技術「從這裡開始朗讀」手勢。僅限 Chrome (拖曳控點、工具列、多餘的按鈕標籤)。
• 使用 accent-color 將頁面的強調色套用至任何瀏覽器產生的 UI。
• 使用 color-scheme 讓瀏覽器 UI 配合淺色/深色模式。
• 使用 scrollbar-color 自訂捲軸顏色，並使用 scrollbar-width 控制捲軸粗細，確保捲動方塊與軌道有明顯區別 (≥3:1)，且不要在可捲動區域設定 scrollbar-width: none (僅在捲動功能完全由其他功能取代時使用)。
• 請使用 :user-invalid/:user-valid 設定有效性樣式，不要使用 :invalid/:valid，因為這些樣式只會在使用者與欄位互動後才會套用，避免在載入網頁時，將必填空白欄位標示為錯誤。廣泛指定 input (例如 input:not(input[type="range"]):user-valid) 時，請排除範圍滑桿，這樣調整滑桿時就不會套用欄位有效性邊框或背景。
• 按鈕和文字欄位 (包括 <textarea>) 通常可以設為一般元素的樣式。
• 使用 font-size 縮放，並使用其他文字屬性控制字體排版

設定文字欄位樣式 (<input> 和 <textarea>)

在大多數樣式設定 (例如顏色、邊框、背景、字體排版等) 中，請將這些元素視為一般文字容器。

• 使用 :placeholder-shown 和 ::placeholder 設定輸入預留位置的樣式。
• 使用 field-sizing: content 讓文字欄位大小符合內容。
• 如果是 <textarea> 元素，請使用 resize: vertical 停用水平調整大小功能，或使用 resize: none 停用所有調整大小功能。

選擇題控制項 (選取、圓形按鈕、核取方塊)

• 如要從下拉式選單中選取其中一個選項，請使用 <select> + appearance: base-select + ::picker(select)。詳情請參閱「品牌精選樣式」
• 從頁面內嵌的多個選項中選取一或多個：請在 <label> 內為每個選項使用 <input type=checkbox> 或 <input type=radio>。透過 label:has(:checked) 設定樣式。
• 透過 appearance: none + 生成內容 (::before/::after) 或背景圖片，設定核取方塊、圓形按鈕和切換鈕的樣式，繪製勾選狀態。

非文字 <input> (按鈕、滑桿、檔案輸入等)

• 檔案輸入：使用 ::file-selector-button 設定按鈕樣式。
• 請勿將 <input> 與 button、submit 或 reset 的 type 搭配使用。請改用 <button>，並將其樣式設為一般元素。
• 滑桿：使用 appearance: none + 拇指虛擬元素 (::-webkit-slider-thumb、::-moz-range-thumb 等) 和軌道虛擬元素 (::-webkit-slider-runnable-track、::-moz-range-track 等)，進行更精細的控制。