appearance: none 可清空表单控件默认样式但需重写基础样式，配合 :focus-visible 控制焦点、accent-color 统一复选框颜色，并避免误用 user-select: none，核心是兼顾美观与可访问性。
用 appearance: none 去掉默认样式，再自己画
浏览器给 <input type="text">、<select></select>、<button></button> 加的边框、圆角、阴影、背景色，是美化最大的障碍。直接用 appearance: none 一步清空——但注意它不兼容 IE，现代项目基本没问题。
必须紧接着重写所有基础样式，否则控件可能“消失”或尺寸异常：
-
border、background、padding、font全得手动设 -
<select></select>清掉appearance后，下拉箭头也没了，得用伪元素或额外<span></span>模拟 -
<input type="checkbox">和<input type="radio">也要单独处理，它们的appearance默认值更顽固
用 :focus-visible 替代 :focus 控制焦点态
很多表单在键盘 Tab 进入时需要明显焦点框，鼠标点击时反而显得多余。:focus-visible 就是为这设计的：只在真正需要键盘导航时才触发。
实操建议：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 别直接写
input:focus { outline: 2px solid #007bff; }，容易干扰鼠标用户 - 改用
input:focus-visible { outline: 2px solid #007bff; outline-offset: 2px; } - 如果想兼顾老浏览器，加一句
input:focus:not(:focus-visible) { outline: none; }安全兜底
用 accent-color 一键统一复选框/单选框颜色
以前调 <input type="checkbox"> 颜色得靠自定义 SVG 或复杂伪元素，现在一行 CSS 就够：accent-color: #4f46e5;。
注意点：
- 仅对原生
checkbox和radio生效，对range、file无效 - Chrome 93+、Firefox 97+、Safari 15.4+ 支持，旧版 Safari 需加
-webkit-appearance: auto; - 和
appearance: none冲突——用了后者就自动失效，二者二选一
禁用 user-select: none 在表单里乱用
有人为了“美观”给整个表单容器加 user-select: none，结果用户点不中输入框、双击不能选中文本、连光标都点不出来。
正确做法：
- 只对纯展示区域（如标签文字旁的图标）加
user-select: none - 所有可交互表单控件（
input、textarea、select）及其父容器，确保user-select是默认值auto或显式设为text - 检查 DevTools 的 Computed 样式，确认
user-select没被意外继承
outline 却没补 :focus-visible，或者用 appearance: none 后忘了设 cursor: pointer 给按钮。这些地方一漏，用户就卡住。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
