重置默认样式再逐项覆盖是唯一可靠路径；先用 all: unset 清除表单元素默认样式，显式声明 display 和 appearance: none，再针对性修复焦点、占位符、checkbox/radio 自定义、select 箭头及可访问性问题。
直接重置默认样式再逐项覆盖，是唯一可靠路径；浏览器对 select、checkbox 等控件的原生样式控制极弱，硬套通用规则必然失败。
先用 all: unset 清除所有表单元素默认样式
不同浏览器对 input、select、textarea、button 的默认边框、内边距、字体、垂直对齐方式处理不一致，直接写 border 或 padding 很可能被覆盖或表现错乱。
-
input, select, textarea, button { all: unset; }是最干净的起点，它抹掉所有继承和浏览器 UA 样式 - 紧接着必须显式声明
display（如input要设为inline-block或block），否则会塌陷或错位 - 别漏掉
appearance: none—— 尤其对select和radio，这是后续自定义箭头/圆点的前提 - 某些旧版 Safari 会忽略
all: unset对select的影响，需额外加-webkit-appearance: none
给 input 和 textarea 加焦点与悬停反馈
用户需要明确感知当前操作位置，但原生 outline 丑且破坏布局，不能简单 outline: none 了事。
-
input:focus, textarea:focus必须同时改border-color和加box-shadow，例如：border-color: #4a90e2; box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2); -
outline: 2px solid transparent比outline: none更安全——保留键盘导航可访问性，又不显示难看轮廓 -
transition: border-color 0.2s, box-shadow 0.2s必须加在常态规则里，否则焦点切换会突兀 -
::placeholder需单独设颜色和字体大小，避免与输入内容混淆；注意 Firefox 用::-moz-placeholder兼容
手动重绘 checkbox 和 radio 的视觉层
这些控件的原生样式无法通过常规 CSS 属性修改，background-color、border-radius 对它们完全无效。
立即学习“前端免费学习笔记（深入）”；
- 先隐藏原生控件：
input[type="checkbox"], input[type="radio"] { appearance: none; -webkit-appearance: none; } - 用
::before或::after伪元素画新样式，例如：input[type="checkbox"]::before { content: ""; display: inline-block; width: 16px; height: 16px; border: 2px solid #999; border-radius: 4px; } - 利用
:checked切换状态：input[type="checkbox"]:checked::before { background-color: #4CAF50; border-color: #4CAF50; } - 若需居中对齐文字，别依赖
vertical-align，改用line-height或 flex 容器包裹整个label
select 下拉箭头必须自己画，别信 background-image 方案
用 background 叠加箭头图容易在高缩放或 Retina 屏上模糊，且无法响应颜色主题切换。
- 容器用
position: relative，select设padding-right: 30px留出空间 - 箭头用伪元素：
select::after { content: "▼"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #999; pointer-events: none; } - 若要支持深色模式，把箭头颜色改为
CSS 变量，例如color: var(--icon-color, #999); - 禁用原生下拉箭头后，iOS Safari 仍可能显示灰色小三角，需加
-webkit-appearance: none并测试真机
最易被忽略的是可访问性退化：移除 outline 后键盘用户会彻底迷失焦点位置；美化 checkbox 时若没保留 label 的 for 关联，屏幕阅读器将无法读出选项含义。每一步覆盖都得同步验证 tab 键导航和 VoiceOver 行为。
