为浏览器生成的界面设置主题

大多数浏览器生成的界面都可以使用 CSS 进行一定程度的自定义。 即使需要现代功能，它也会在旧版浏览器中优雅降级，因此通常不需要 polyfill 或后备。

在重新创建浏览器界面（表单控件、滚动条、选择、出错提示等）之前，请先验证：

1. 即使使用现代 CSS，浏览器界面也无法充分满足您的需求，
2. 所需的自定义设置非常重要，足以抵消重新创建内置界面的代价，尤其是失去原生界面免费提供的无障碍语义、键盘处理、IME 和 AT 集成。

可能的自定义示例：

• 使用 ::selection 自定义突出显示的文字颜色。
• 请勿对内容文本应用 user-select: none，否则会破坏复制粘贴、翻译工具和辅助技术“从此处开始朗读”手势。仅限于 Chrome（拖动手柄、工具栏、多余的按钮标签）。
• 使用 accent-color 将页面的强调色应用于任何浏览器生成的界面。
• 使用 color-scheme 让浏览器界面适应浅色/深色模式。
• 使用 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> 与 type 为 button、submit 或 reset 的 搭配使用。请改用 <button>，并将其样式设置为常规元素。
• 滑块：使用 appearance: none + 拇指伪元素（::-webkit-slider-thumb、::-moz-range-thumb 等）和轨道伪元素（::-webkit-slider-runnable-track、::-moz-range-track 等）进行更精细的控制。