最常用且最可靠的方式是使用属性选择器[type="text"]、[type="password"]等精准匹配不同类型的输入框；需确保HTML中type值全小写，完全匹配才能生效，不支持省略type属性的input元素。

可以直接用属性选择器 [type="text"]、[type="password"] 等来精准匹配不同类型的输入框，这是最常用也最可靠的方式。

基础写法：按 type 值选中特定输入框

HTML 中的 <input> 元素通过 type 属性区分用途，CSS 可直接用方括号语法筛选：

• input[type="text"] { border: 1px solid #ccc; } —— 只作用于文本输入框
• input[type="email"] { padding-left: 20px; background: url(email-icon.svg) 5px center no-repeat; } —— 邮箱框加图标
• input[type="submit"], input[type="button"] { background: #007bff; color: white; } —— 合并设置按钮类输入框

注意 type 的值必须完全匹配（区分大小写）

HTML 规范中 type 值是小写的，比如 type="Text" 或 type="TEXT" 不会被 [type="text"] 匹配到。确保 HTML 写法规范：

• ✅ 正确：<input type="search"> → 可用 input[type="search"]
• ❌ 错误：<input type="Search"> → 不会命中 [type="search"]

结合其他属性更精准定位

单靠 type 有时不够，可叠加其他属性进一步限定：

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

立即学习“前端免费学习笔记（深入）”；

• input[type="text"][required] { border-color: #d32f2f; } —— 仅必填文本框变红边
• input[type="number"][min="0"] { width: 100px; } —— 限制最小值为 0 的数字框设固定宽
• input[name="phone"][type="tel"] { font-family: "Courier New"; } —— 名为 phone 的电话输入框用等宽字体

兼容性与注意事项

属性选择器 [type="xxx"] 在所有现代浏览器及 IE7+ 都支持，基本无兼容顾虑。但需留意：

• 没有 type 属性的 <input> 默认是 type="text"，但不会被 [type="text"] 选中（因为属性不存在），如需覆盖，得额外写 input:not([type])
• 自定义 type（如 type="custom"）只要浏览器不识别，仍会回退为 text，但 CSS 不会自动匹配，仍需按实际写的值来写选择器

基本上就这些。用好 [type] 选择器，能干净利落地分开处理各种输入框，样式逻辑更清晰，维护也轻松。