直接使用 input[type="email"] 即可精准定位 type="email" 的输入框，无需 class 或 id；注意引号必须为英文且 type 值严格区分大小写。
怎么用 attribute 选择器定位 type="email" 这类输入框
直接写 input[type="email"] 就能命中所有 email 类型的输入框，不需要额外 class 或 id。注意引号必须是英文双引号或单引号，且 type 值要和 HTML 中完全一致（比如 type="EMAIL" 不会匹配 input[type="email"]）。
常见可直接用的类型包括："text"、"password"、"email"、"number"、"date"、"search"、"tel"、"url"。不支持自定义值如 "username" —— 浏览器只认标准 type。
- 如果 HTML 是
<input type="email" name="user_email">，CSS 写input[type="email"]即可 - 想同时匹配多个类型，可用逗号分隔：
input[type="email"], input[type="url"] - 避免写成
input[type=email]（没引号），部分旧浏览器可能不识别
如何给聚焦状态加样式：结合 :focus 伪类
单独选中聚焦的 email 输入框，用 input[type="email"]:focus。这个组合选择器优先级比单纯 :focus 高，也比单纯 input[type="email"] 高，能确保样式准确生效。
注意顺序：如果同时定义了默认态和聚焦态，建议把 :focus 放在后面，否则可能被前面的规则覆盖。
立即学习“前端免费学习笔记（深入）”；
input[type="email"] {
border: 1px solid #ccc;
}
input[type="email"]:focus {
border-color: #007bff;
outline: none;
box-shadow: 0 0 4px rgba(0, 123, 191, 0.3);
}
-
outline: none常用于去掉默认蓝色外框，但请确保提供其他视觉反馈（如边框变色或阴影），否则影响可访问性 - 不要只靠
box-shadow实现焦点提示，低对比度屏幕下可能看不清 - 某些安卓 WebView 对
:focus支持不稳定，可配合input[type="email"]:focus-visible做渐进增强
为什么 input[type^="text"] 有时不生效
[type^="text"] 是属性值开头匹配，理论上能匹配 type="text" 和 type="search"（因为 search 以 text 开头？错）。实际上 "search" 并不以 "text" 开头，所以不会被选中。这个选择器只对真实以指定字符串开头的值有效，比如 type="text-primary" 才会被 [type^="text"] 匹配。
更常见的误用是想“排除 password”，然后写 input:not([type="password"]) —— 这会匹配所有非 password 的输入框，包括 type="hidden"、type="submit" 等，通常不是你想要的。
- 精准控制推荐白名单：
input[type="text"], input[type="email"], input[type="url"] - 需要排除某类时，明确列出要样式化的类型，比用
:not()更可控 -
[type*="text"]（包含匹配）也不推荐，容易误中type="color"这类无关项
兼容性与移动端 focus 行为差异
大部分现代浏览器都支持 input[type="xxx"]:focus，IE9+ 也支持。但 iOS Safari 和部分 Android 浏览器在点击输入框时，可能延迟触发 :focus，或在键盘收起后不立即移除该状态。
这不是 CSS 问题，而是输入法生命周期导致的。不能靠纯 CSS 修复，但可以加一层防御：
input[type="email"] {
transition: border-color 0.2s;
}
input[type="email"]:focus,
input[type="email"].js-focus {
border-color: #007bff;
}
- JavaScript 可监听
focusin和focusout，动态加/删js-focusclass，绕过原生 focus 的时机问题 - 如果项目已用框架（如 React），注意受控组件中
value和onChange不会影响 focus 状态，无需额外处理 - 真正容易被忽略的是：iOS 上
input[type="number"]会触发数字键盘，但样式仍走input[type="number"]规则，别误以为它不匹配
