appearance: none 可清空表单控件默认样式但需重写基础样式，配合 :focus-visible 控制焦点、accent-color 统一复选框颜色，并避免误用 user-select: none，核心是兼顾美观与可访问性。

用 appearance: none 去掉默认样式，再自己画

浏览器给 <input type="text">、<select>、<button> 加的边框、圆角、阴影、背景色，是美化最大的障碍。直接用 appearance: none 一步清空——但注意它不兼容 IE，现代项目基本没问题。

必须紧接着重写所有基础样式，否则控件可能“消失”或尺寸异常：

• border、background、padding、font 全得手动设
• <select> 清掉 appearance 后，下拉箭头也没了，得用伪元素或额外 <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 给按钮。这些地方一漏，用户就卡住。