应使用属性选择器精准选中文本类表单元素，如input[type="text"]等，并包含textarea和select；需重置box-sizing、resize、vertical-align及字体行高；剥离系统样式用appearance: none并补全下拉箭头；禁用态须兼顾可访问性，确保对比度与交互反馈。
怎么用 CSS 选中所有 <input> 文本类表单元素
不能只写 input，它会匹配 type="submit"、type="checkbox" 等非文本输入控件，导致按钮或复选框被意外样式污染。
推荐用属性选择器精准定位：
-
input[type="text"]、input[type="email"]、input[type="password"]、input[type="search"]、input[type="tel"]、input[type="url"] - 更省事的写法是：
input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"]—— 覆盖默认无type的input（浏览器按text渲染）和常见文本类型 - 别漏掉
textarea和select，它们虽不是input，但属于用户可编辑的表单文本容器，统一时必须一并处理
为什么 input 和 textarea 默认样式差异大
因为它们底层渲染机制不同：input 是替换元素（replaced element），有内置尺寸和行高逻辑；textarea 是可替换的块级元素，内容可换行、支持 rows/cols 属性，且默认带滚动条和内边距。
统一前必须重置关键属性：
立即学习“前端免费学习笔记（深入）”；
- 清除
textarea的默认resize：加resize: none; - 对齐垂直对齐方式：
vertical-align: middle;或top，否则和旁边标签/按钮错位 - 统一
box-sizing：全部设为border-box，避免padding影响宽度计算 -
textarea的line-height和font必须显式继承，否则在某些浏览器中字体大小不一致
appearance 和 -webkit-appearance 怎么用才不翻车
原生表单控件（尤其 select、input[type="date"]）在不同系统上样式差异极大。想统一外观，必须先剥离系统默认样式。
关键写法：
input, select, textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
注意点：
-
appearance: none在 Firefox 中对select支持较晚（≥96），老版本需配合background+ 自定义下拉箭头 - 移除
appearance后，select的下拉图标消失，需用::after伪元素 +background-image或 SVG 补上 -
input[type="range"]等控件慎用appearance: none，它会直接让滑块不可见，需额外重写::-webkit-slider-thumb等伪元素
表单元素禁用状态（:disabled）的样式陷阱
很多团队只改 opacity 或 color，结果在 Windows 高对比度模式或读屏软件下完全不可用。
真正健壮的写法要兼顾可访问性：
- 用
cursor: not-allowed明确反馈交互状态 - 避免仅靠颜色区分启用/禁用（比如只把文字变灰），应叠加
opacity+background-color变暗 +border-color变浅 - 禁用时保留足够对比度：文字与背景的对比度至少 4.5:1，可用工具如 axe DevTools 检查
- 别忘了
fieldset[disabled]会批量禁用内部所有控件，它的样式优先级高于子元素的:disabled，需单独处理
最常被忽略的是 select 的禁用态——它的 option 标签不会响应 :disabled，必须给 select:disabled 单独设样式，且确保焦点轮廓（outline）也被合理抑制。
