外观属性

最后更新：2026-09-13

appearance 外观属性

appearance 用于控制元素是否使用浏览器原生的外观样式（如表单控件的默认渲染）。当设置为 none 时，元素会移除原生外观，完全由 CSS 控制样式，是自定义表单控件外观的关键属性。

分类
初始值	none
继承	否
适用于
可动画
CSS 版本	CSS3
状态	标准

📝 语法

appearance: none | auto;

⚙️ 取值

值	类型	描述
`none \| auto`	关键字	原生外观

▶ 示例

编辑下方代码，在 playground 中查看实时效果：

▶ 试一试

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
appearance	✓ v79	✓ v12	✓ v52	✓ v10.1	✓ v44
所有主流浏览器均支持

提示： appearance: none 常用于自定义 <select>、<input type="checkbox">、<input type="radio"> 等表单控件的外观。

注意： 为了兼容性，建议同时使用 -webkit-appearance 和 -moz-appearance 前缀；不同浏览器对 appearance 的支持程度略有差异。

❓ 常见问题

Qappearance: none 会移除哪些样式？

A会移除浏览器为表单控件添加的原生外观：select 的下拉箭头、checkbox/radio 的默认勾选样式、range 滑块轨道、search 的清除按钮、number 的上下箭头等。移除后控件视觉归零，由 CSS 完全接管，但功能不受影响——点击、选中、提交都正常。

Qappearance 能恢复默认外观吗？

A可以，appearance: auto 让元素恢复浏览器默认的原生外观。但不同浏览器对 auto 的还原程度略有差异，之前用 none 自定义过复杂样式的话，恢复后仍可能出现细微不一致。推荐只使用 auto/none 两个值。

Qappearance: none 后 select 的下拉箭头没了，怎么加自定义箭头？

A用背景图补齐：appearance: none 去掉原生箭头后，设置 background: #fff url('arrow.svg') no-repeat right 12px center;，并给 select 加 padding-right 留出箭头空间。这是自定义下拉框的经典套路，注意保持足够的点击区域。

Qappearance 和 -webkit-appearance 都要写吗？

A建议都写。-webkit-appearance 对应 Safari 和旧版 Chromium，-moz-appearance 对应 Firefox，标准 appearance 用于新版浏览器。Firefox 对 checkbox 等仍要求 -moz-appearance: none 才生效，所以三者一起写最稳妥。