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 重置默认样式
以下是一个通用的重置方法：
立即学习“前端免费学习笔记（深入）”；
/* 重置 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; }/ 为 select 添加自定义下拉箭头（可选） / select::after { / 注意：appearance: none 后无法使用伪元素，需借助 wrapper 容器模拟 / }
对于 radio 和 checkbox，使用 appearance 可以彻底隐藏原生样式，然后通过伪元素实现自定义图标或动画效果：
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; }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 一致性。
