要选中表单输入框需根据类型、属性、状态或层级编写css选择器。1. 按type属性选中特定输入框，如text、password等；2. 使用属性选择器匹配type存在或包含特定值的元素；3. 通过class或id精准定位；4. 利用:focus、:disabled等伪类选中特定状态的输入框；5. 结合父元素如form或使用:is()简化多元素选择。组合这些方法可精确控制样式。

要通过 CSS 选择器选中表单输入框，关键是根据 input 元素的类型、属性、状态或层级关系 来编写合适的选择器。下面是一些常用且实用的方法。

1. 根据 input 类型选择

最常见的输入框是文本框、密码框、邮箱等，它们的 type 属性不同，可以通过类型来选中：

• input[type="text"] —— 选中文本输入框
• input[type="password"] —— 选中密码框
• input[type="email"] —— 选中邮箱输入框
• input[type="number"] —— 选中数字输入框
• input —— 选中所有 input 元素（包括按钮、复选框等）

如果只想选中所有文本类输入框，可以这样写：

input[type="text"], input[type="password"], input[type="email"], input[type="number"] { border: 1px solid #ccc; }

2. 使用属性选择器简化匹配

如果所有输入框都没有 type 或你想匹配多个相似类型，可以用属性子串匹配：

input[type] { padding: 8px; }

或者匹配 type 包含 "text" 的（比如 text、search、url 等）：

input[type*="text"] { background-color: #f9f9f9; }

3. 通过类名或 ID 精准定位

在 HTML 中给输入框添加 class 或 id，是最直接的方式：

.form-input { border: 2px solid blue; }

word报告自动生成神器

Word报告自动生成神器。自动生成专业Word文档报告，支持模板填充、目录生成、表格/图表插入、页眉页脚、多级标题、样式主题、批量邮件合并。当用户需要生成Word报告、创建合同文档、批量生成通知/证书、填充Word模板、制作商业计划书时触发。

下载

email-field { font-weight: bold; }

4. 选中特定状态的输入框

CSS 还支持选中具有特定状态的输入框，比如获得焦点、被禁用、无效输入等：

• input:focus —— 当输入框被点击并处于编辑状态
• input:disabled —— 被禁用的输入框
• input:invalid —— 内容不符合规则（如邮箱格式错误）
• input:valid —— 输入内容合法

例如，聚焦时改变边框颜色：

input:focus { border-color: #007bff; outline: none; }

5. 结合父元素或表单结构选择

如果只想选中某个表单内的输入框，可以结合容器选择：

form.login-form input { width: 100%; margin-bottom: 10px; }

或者使用更现代的选择器，如 :is() 来简化写法：

:is(input, textarea, select) { font-family: sans-serif; }

基本上就这些。根据实际 HTML 结构和需求，组合使用这些选择器就能精准控制任意输入框的样式。不复杂但容易忽略细节。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！