深色模式下表单控件需主动声明color-scheme: dark，并统一设置背景色、文字色、边框及焦点样式；label、checkbox、radio、按钮等须按可访问性标准校准明度与对比度，避免纯黑/纯白及opacity降级。
深色模式下 input 和 textarea 的默认样式问题
浏览器在深色模式下不会自动适配表单控件背景和文字颜色，input、textarea 常常显示为白色背景+黑色文字，在深色页面上形成刺眼反差。这不是 bug，而是 CSS 初始化缺失导致的视觉断裂。
解决方式不是靠系统媒体查询硬切主题，而是用 color-scheme: dark 主动声明，并配合显式设置：
-
background-color设为#1e1e1e或hsl(210 10% 12%)这类低饱和深灰，避免纯黑（#000）造成过度对比 -
color设为#e0e0e0或hsl(0 0% 88%)，比纯白更柔和 - 必须设置
border，否则在深色背景下边框会“消失”——推荐1px solid #333 - 禁用
appearance: none时要小心：Safari 对input[type="date"]等控件的深色支持不一致，建议保留原生外观
label 与 focus 状态下的可访问性陷阱
很多人只改了 input 样式，却忽略 label 文字在深色背景下的可读性下降，以及聚焦时缺乏视觉反馈——这直接违反 WCAG 2.1 的焦点可见性要求。
关键动作：
立即学习“前端免费学习笔记（深入）”；
-
label使用color: #c0c0c0（非纯灰），确保与背景对比度 ≥ 4.5:1 - 给
input:focus加outline: 2px solid #4a90e2，别用box-shadow替代 outline——屏幕阅读器依赖 outline 判断焦点位置 - 若用
outline-offset，值不要超过2px，否则在 Windows 高对比模式下 outline 可能被裁切 - 避免仅靠颜色区分状态，比如错误态不要只变红文字，要加图标或边框粗细变化
checkbox 和 radio 在深色模式下的渲染异常
Chrome 和 Firefox 对深色模式下 input[type="checkbox"] 和 input[type="radio"] 的默认样式处理不一致：Firefox 会自动变深，Chrome 仍保持浅色圆点/方框，导致在深背景上几乎不可见。
稳妥做法是重置并统一控制：
- 用
accent-color: #4a90e2控制勾选色（支持 Chrome 93+/Firefox 96+） - 对旧浏览器降级：用
appearance: none+ 自定义伪元素，但必须保留position: absolute定位，且clip-path裁剪区域不能超出原始控件尺寸，否则影响可访问性 - 不要隐藏原生控件后仅用
::before模拟——会导致 VoiceOver 无法朗读选中状态 - 测试时打开 macOS 系统深色模式 + Safari 开发者工具中的“模拟强制颜色方案”，确认勾选标记是否清晰
表单提交按钮的悬停与禁用状态一致性
深色模式下按钮的 :hover 和 :disabled 状态容易失衡：悬停太亮像闪光，禁用又太暗看不清文字。根本原因是没按深色逻辑重新设计明度梯度。
实用配色策略：
- 主按钮背景用
#2d5a8c（非纯蓝），:hover升明度至#3a70a8，:active降为#254d7a，保持同一色相下的层次 -
:disabled不要用opacity: 0.5——它会让文字对比度跌破 4.5:1；改用background-color: #333+color: #666并加cursor: not-allowed - 按钮内边距别盲目放大，深色模式下过大的
padding会让按钮显得空洞；推荐0.5rem 1rem起步 - 如果按钮含图标（如
<svg></svg>），确保其fill颜色随文字同步变化，别写死fill="#000"
深色表单最难的不是颜色替换，而是每处交互反馈都要重新校准明度关系——人眼在暗环境里对亮度变化更敏感，差 5% 的灰度就可能让按钮“沉下去”或“跳出来。
