appearance属性用于移除表单元素的默认原生样式，通过设置为none可实现跨浏览器外观统一，适用于input、select、textarea等元素，需配合-webkit-appearance和-moz-appearance前缀以兼容不同浏览器，现代浏览器支持良好，IE不支持但Edge已兼容。
表单元素在不同浏览器下样式不统一，比如 input、select、textarea 等经常自带圆角、阴影或系统原生控件样式，导致页面看起来不够美观或风格不一致。解决这类问题的一个有效方式是使用 CSS 的 appearance 属性来重置默认外观。
什么是 appearance 属性？
appearance 是一个 CSS 属性，用于控制元素是否显示为平台原生的控件（如系统下拉框、按钮等）。通过将其设置为 none，可以移除浏览器默认的渲染样式，从而完全自定义表单元素的外观。
它支持大多数表单元素，包括：
- button
- input[type="radio"]、input[type="checkbox"]
- select
- textarea
如何用 appearance 重置默认样式
以下是一个通用的重置方法：
立即学习“前端免费学习笔记（深入）”；
<pre class="brush:php;toolbar:false;">
/* 重置 select 下拉框 */
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* 可添加自定义背景、边框等 */
background-color: white;
border: 1px solid #ccc;
padding: 8px 12px;
border-radius: 4px;
cursor: pointer;
}
<p>/<em> 为 select 添加自定义下拉箭头（可选） </em>/
select::after {
/<em> 注意：appearance: none 后无法使用伪元素，需借助 wrapper 容器模拟 </em>/
}
对于 radio 和 checkbox，使用 appearance 可以彻底隐藏原生样式，然后通过伪元素实现自定义图标或动画效果：
<pre class="brush:php;toolbar:false;">
input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 16px;
height: 16px;
border: 2px solid #999;
border-radius: 3px;
position: relative;
cursor: pointer;
}
<p>input[type="checkbox"]:checked::after {
content: "✔";
position: absolute;
top: -2px;
left: 2px;
color: #007acc;
font-size: 14px;
}
兼容性注意事项
appearance 属性需要加上浏览器前缀以确保兼容性：
- -webkit-appearance：适用于 Safari、Chrome 等 WebKit 内核浏览器
- -moz-appearance：适用于 Firefox
- appearance：标准属性，现代浏览器均已支持
注意：IE 浏览器不支持 appearance 属性，但在 Edge（基于 Chromium）中已支持。
总结建议
当发现表单元素默认样式影响设计时，appearance 是一个简单高效的解决方案。通过设置为 none，你可以从“空白画布”开始设计，完全掌控视觉表现。搭配边框、背景、圆角、阴影等属性，轻松打造统一、现代化的表单风格。
基本上就这些，合理使用 appearance 能极大提升 UI 一致性。
