appearance: none是CSS属性，需写在style标签或外部CSS中；仅对text、search、button、checkbox、radio等控件有效，select/number/date在iOS Safari中基本无效；必须补全前缀、伪元素及状态样式。
appearance 属性不是“在 HTML 编辑器中”用的，它只是普通 CSS 规则，写在 <style> 标签里或外部 CSS 文件中即可生效。别被“编辑器”这个词带偏——你不需要特殊编辑器支持，只要浏览器支持该属性，样式就会起作用。
哪些控件加了 appearance: none 才真能重置
不是所有表单元素都买账。真正能被 appearance: none 影响的，只有基础、语义轻、系统干预少的控件：
-
<input type="text">、<input type="search">、<textarea>：在 iOS ≥16.4 +-webkit-appearance: none下可清掉内边距、圆角、边框；但 placeholder 颜色仍需::placeholder单独设 -
<button>：完全可控，推荐作为自定义按钮起点 -
<input type="checkbox">和<input type="radio">：能隐藏原生图标，但必须手动用::before或背景图替代，并同步aria-checked状态 -
<select>、<input type="date">、<input type="number">：iOS Safari 中基本无效——不是漏写了前缀，是 Apple 主动拦截。下拉箭头、灰暗文字、不可点击等问题，硬加appearance没用
为什么写了 appearance: none 还有箭头/边框/背景色
常见错误现象背后，往往不是 CSS 写错了，而是没覆盖完整渲染链：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 只写
appearance: none，漏掉-webkit-appearance: none和-moz-appearance: none：Firefox 对select会直接忽略，Safari 在旧版本中只认-webkit-前缀 - 对
<select>加了appearance: none后，又没补background: white和-webkit-border-radius: 0：Safari 会保留灰色背景和圆角，导致自定义样式“透底” - 对
<input type="number">只设appearance: none，没加::-webkit-inner-spin-button { appearance: none }：上下微调按钮依然可见 - 用
all: unset替代appearance：会把display也干掉，控件直接消失，且破坏可访问性（如role被重置）
移动端真要统一外观，绕过原生控件更靠谱
死磕 appearance 在 iOS 上大概率失败。实际项目中更稳的路径是“隐藏 + 模拟”：
立即学习“前端免费学习笔记（深入）”；
- 对
<select>：用visibility: hidden隐藏原生控件，外层包<div role="combobox" tabindex="0">，再用aria-expanded和键盘事件（keydown监听Space/ArrowDown）维持可访问性 - 对日期选择：放弃整体 UI 重写，只用
<input type="date">+::-webkit-datetime-edit微调字体颜色（注意：该伪元素 iOS Safari 不支持，仅 Chrome / Android WebView 有效） - 所有自定义层必须保留语义：比如模拟复选框时，
<div role="checkbox" aria-checked="true">比纯视觉图标可靠得多
最常被忽略的一点：即使 appearance: none 生效了，:focus、:disabled、:hover 等状态样式也得全部手写，否则用户操作时毫无反馈——这不是“美化问题”，是交互断裂。
