[type] 属性选择器可精准控制不同 input 类型样式，无需额外 class；支持基础类型（text、password 等）、HTML5 新增类型（email、date 等），并可通过组合选择器和重置默认样式提升兼容性与精度。
![css表单input类型不同样式如何区分_使用[type]属性选择器区分表单控件](https://img.php.cn/upload/article/000/969/633/176922778039047.jpeg)
直接用 [type] 属性选择器就能精准控制不同 input 类型的样式，无需额外 class，简洁又可靠。
基础写法：按 type 值单独设置样式
HTML 中 input 的 type 值（如 text、password、email、number、checkbox、radio 等）会自动反映在元素上，CSS 可直接匹配：
input[type="text"] { border: 1px solid #ccc; padding: 8px; }input[type="password"] { background-color: #f9f9f9; }input[type="submit"] { background: #007bff; color: white; font-weight: bold; }input[type="checkbox"], input[type="radio"] { margin-right: 6px; transform: scale(1.2); }
处理 HTML5 新增类型更直观
像 email、url、tel、date、color 这类语义化类型，用 [type] 选择器可统一增强体验：
-
input[type="email"], input[type="url"] { text-transform: lowercase; }（辅助规范输入） input[type="date"] { padding: 6px 10px; font-family: "Segoe UI", sans-serif; }input[type="color"] { width: 40px; height: 40px; border: none; border-radius: 4px; }
组合使用提升精度与兼容性
避免全局污染，推荐结合其他属性或父容器限定范围：
立即学习“前端免费学习笔记（深入）”；
form .controls input[type="text"] { width: 100%; max-width: 300px; }input[type="number"]:not([readonly]) { appearance: textfield; } /* 修复 Chrome 默认 spinner 样式 */-
input[type="checkbox"]:checked + label { color: #28a745; font-weight: 600; }（配合相邻兄弟选择器）
注意浏览器默认样式的干扰
某些 type（如 number、search、range）在不同浏览器中渲染差异大，建议重置关键属性：
- 统一
box-sizing: border-box; - 清除
appearance: none;（再手动添加自定义箭头/滑块等） - 对
search类型隐藏原生 × 清除按钮：input[type="search"]::-webkit-search-cancel-button { display: none; }
不复杂但容易忽略。只要记住 type 是真实存在的 HTML 属性，CSS 就能稳稳抓住它。
