直接套用 CSS 框架的 .form-control 样式不一致，因框架未统一浏览器对 date、number、select 等原生控件的渲染差异；需重置 appearance、padding、border 等并显式定义视觉层，配合 focus-visible、disabled、error 等状态类分层控制。
为什么直接套用 CSS 框架的 .form-control 仍会出现样式不一致？
多数 CSS 框架（如 Bootstrap、Tailwind、Bulma）提供基础输入类，但它们默认只控制 <input>、<textarea>、<select> 的基础盒模型和字体，不处理浏览器原生差异。比如 Chrome 对 <input type="date"> 渲染的内部控件、Safari 对 <input type="number"> 的增减按钮、Firefox 对 <select> 下拉箭头的默认样式，都会绕过 .form-control 生效。
真正统一外观的关键不是“加一个类”，而是「重置原生行为 + 显式定义视觉层」。
appearance: none 是起点，但必须配合显式尺寸与伪元素
仅写 appearance: none 不足以统一——它只是隐藏原生控件，但不同标签的默认 padding、line-height、border 依然不同。必须连带重置并手动补全。
-
input、textarea、select都要显式设置padding（例如0.5rem 0.75rem），不能依赖框架默认值 -
select需额外用::after或背景图模拟下拉箭头，否则会留白或显示残影 -
input[type="checkbox"]和input[type="radio"]必须单独处理，appearance: none后需用::before绘制自定义图形
.form-input,
.form-select,
.form-textarea {
appearance: none;
padding: 0.5rem 0.75rem;
border: 1px solid #d1d5db;
border-radius: 0.375rem;
font-size: 0.875rem;
line-height: 1.25;
background-color: #fff;
}
.form-select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l2 2 2-2'/%3e%3c/svg%3e");
background-position: right 0.5rem center;
background-repeat: no-repeat;
background-size: 1em;
}
如何用类组合覆盖不同状态而不破坏可访问性？
用户常为聚焦态加 outline: 2px solid blue，但这样会覆盖原生焦点环，导致键盘导航不可见。正确做法是保留 outline 逻辑，仅调整颜色和偏移，并确保禁用态（:disabled）有明确视觉降级。
立即学习“前端免费学习笔记（深入）”；
- 用
:focus-visible替代:focus，避免鼠标点击时出现多余轮廓 -
:disabled必须同时设opacity: 0.5和cursor: not-allowed，且不能仅靠颜色变淡 - 错误态（如
.form-input.error）建议用border-color: #ef4444+box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1)，比纯边框更易识别
.form-input:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}
.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.form-input.error {
border-color: #ef4444;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
表单类组合命名要反映结构层级，别堆砌功能词
像 form-input-primary-sm-error 这类命名看似灵活，实际导致维护困难：语义模糊、顺序随意、无法预测组合爆炸。应该按「容器 → 元素 → 状态」分层，用连字符分隔层级而非功能。
- 容器类（如
form-group）负责布局和间距 - 元素类（如
form-input、form-label）专注自身样式 - 状态类（如
is-disabled、has-error）只改必要属性，不重复定义尺寸/字体
这样写 HTML 更清晰：<div class="form-group"><label class="form-label">邮箱</label><input class="form-input has-error" /></div>。改错态样式时，只需动 has-error，不影响 form-input 主干规则。
