CSS属性选择器可精准匹配input类型实现差异化样式，如[type="text"]、[type="password"]等，并支持与伪类组合增强交互，同时需注意大小写匹配和现代输入类型的浏览器兼容性处理。
表单元素类型多（如 text、password、email、number、checkbox、radio 等），但 HTML 中它们都用 标签，光靠标签名或 class 很难统一又精准地样式化。用 CSS 属性选择器，能直接根据 type 属性值区分并设置不同样式，既干净又可靠。
用 [type="xxx"] 精准匹配输入类型
这是最常用也最直观的方式。浏览器原生支持，无需额外 class，语义清晰：
-
input[type="text"]—— 匹配所有文本输入框 -
input[type="password"]—— 单独给密码框加图标或遮罩提示 -
input[type="email"], input[type="url"]—— 合并设置邮箱和网址输入的校验样式（比如右侧加对勾图标） -
input[type="number"]—— 隐藏默认上下箭头（appearance: none+ 自定义按钮）
结合伪类增强交互反馈
属性选择器可与伪类组合，让不同输入类型拥有专属交互态：
-
input[type="search"]:focus—— 搜索框聚焦时扩大边框或添加阴影 -
input[type="checkbox"]:checked + label—— 勾选后高亮对应文字 -
input[type="radio"]:hover ~ .radio-tip—— 鼠标悬停单选按钮时显示提示
处理现代输入类型（color、date、range）的样式兼容性
这些类型在不同浏览器中默认样式差异大，需针对性重置：
立即学习“前端免费学习笔记（深入）”；
-
input[type="color"]：用width、height控制色块大小，border-radius圆角，避免用background覆盖原生取色器 -
input[type="date"]：无法直接美化下拉日历，但可统一padding和font，配合::-webkit-calendar-picker-indicator调整小图标 -
input[type="range"]：必须用::-webkit-slider-thumb和::-moz-range-thumb分别控制拖动点样式
避免常见误区
属性选择器方便，但要注意细节：
- 属性值必须完全匹配（区分大小写），
type="TEXT"不会被[type="text"]匹配 - 不要滥用通配，比如
input[type]会命中所有带 type 的 input，包括submit、button，可能误伤 - 若需兼顾无 type 属性的老式写法（如
），建议统一补上type="text"，保持结构规范
