appearance: none 是重置表单控件默认样式的起点，需配合前缀、边框、背景、内边距及焦点样式等手动补全，并针对 select、number、checkbox 等特殊控件做额外处理，同时兼顾可访问性。
想替换输入框的默认样式，appearance: none 是关键一步，但它只是起点——光靠它还不够，得配合其他样式一起用，才能真正“重置并接管”外观。
为什么要用 appearance: none
浏览器给 <input type="text">、<select></select>、<button></button> 等控件加了系统级默认样式（比如 macOS 的圆角阴影、Windows 的立体边框）。appearance: none 的作用就是剥离这层原生皮肤，让 CSS 能完全控制它的视觉表现。
注意：需要加浏览器前缀才能兼容老版本：
-
-webkit-appearance: none;（Chrome/Safari/Edge） -
-moz-appearance: none;（Firefox） -
appearance: none;（现代标准）
只写 appearance: none 还不够
它只是“去壳”，不会自动帮你设宽高、边框、背景或聚焦效果。去掉原生样式后，你得手动补全基础样式，否则可能看起来像消失了，或在某些浏览器中仍残留部分样式（比如 Firefox 对 input[type="number"] 的上下箭头）。
立即学习“前端免费学习笔记（深入）”；
建议搭配设置：
-
border: 1px solid #ccc;（显式定义边框） -
background: white;（避免透明或继承背景） -
padding: 8px 12px;（保证文字可读、点击区域合理） -
outline: none;（移除焦点虚线框，但记得用box-shadow或border-color提供可访问的焦点提示）
特殊控件要额外处理
不同控件“藏得深”的原生元素不同，appearance: none 不一定一劳永逸：
-
<select></select>：右侧下拉箭头需用background自定义，或配合select::-ms-expand（IE/Edge）隐藏原生按钮 -
<input type="number">：Chrome 会显示上下微调按钮，需加::-webkit-inner-spin-button, ::-webkit-outer-spin-button { appearance: none; margin: 0; } -
<input type="checkbox">或<input type="radio">：必须用appearance: none+ 自定义::before/::after实现图标，否则无法样式化
别忘了可访问性
重置样式不等于抛弃语义和可用性。确保：
- 聚焦状态（
:focus）有清晰视觉反馈（如box-shadow: 0 0 0 2px #007bff;） - 禁用状态（
:disabled）有灰阶、低透明度等明确提示 - 使用
label关联表单控件，支持屏幕阅读器 - 避免仅靠颜色区分状态（比如只改边框色），补充图标或文字提示
基本上就这些。appearance: none 是打开自定义大门的钥匙，但进门之后，还得自己铺地板、装灯、配家具。
