网站
引入
表单是网页里用户最常用的交互区域之一。
输入框、复选框、单选按钮等表单控件，会根据用户的操作进入不同的状态，例如获取焦点、禁用、选中、填写内容等。CSS 输入伪类就是用来选中这些特定状态的表单元素，从而给它们添加不同的样式。
正文
定义
定义
CSS 输入伪类用于选中表单元素的特定输入状态，例如获取焦点、禁用、选中、必填等，从而根据状态设置不同的显示效果。
输入伪类主要用于表单元素，例如 <input>、<textarea>、<select> 等。
常见输入伪类
:focus
选中获取焦点的元素，例如鼠标点击输入框或通过 Tab 键选中时。
input:focus {
border-color: blue;
outline: 2px solid lightblue;
}当用户点击输入框时，边框和轮廓会变成蓝色，让用户明确知道当前正在操作哪个输入框。
:disabled
选中被禁用的表单元素，这些元素不能被用户交互。
input:disabled {
background-color: #f0f0f0;
color: #999;
cursor: not-allowed;
}禁用的输入框通常会显示灰色背景和灰色文字，鼠标移上去会显示不可用的光标。
:enabled
选中可交互的表单元素，和 :disabled 相反。
input:enabled {
background-color: white;
}这个伪类用得不多，因为可交互的元素通常就是默认状态。
:checked
选中被选中的复选框或单选按钮。
input[type="checkbox"]:checked {
accent-color: green;
}
input[type="radio"]:checked + label {
font-weight: bold;
}第一个例子让选中的复选框显示绿色勾选标记，第二个例子让选中的单选按钮旁边的文字变粗。
:required
选中必填的表单元素，通常是带有 required 属性的输入框。
input:required {
border-left: 3px solid red;
}给必填输入框左侧加一个红色边框，提醒用户这个字段不能为空。
:optional
选中非必填的表单元素，和 :required 相反。
input:optional {
border-left: 3px solid #ccc;
}可选输入框显示灰色边框，和必填输入框的红色边框形成对比。
:valid
选中内容符合验证规则的表单元素。
input:valid {
border-color: green;
}例如邮箱输入框填写了正确格式的邮箱地址后，边框会变成绿色。
:invalid
选中内容不符合验证规则的表单元素。
input:invalid {
border-color: red;
}如果邮箱输入框填写了错误格式的内容，边框会变成红色，提示用户输入错误。
:placeholder-shown
选中当前显示占位符的输入框，也就是用户还没有输入内容的状态。
input:placeholder-shown {
border-color: #ddd;
}当输入框显示占位符时，边框是浅灰色；一旦用户开始输入，占位符消失，边框颜色会恢复默认。
:read-only
选中只读的表单元素，这些元素可以显示内容但不能被编辑。
input:read-only {
background-color: #f5f5f5;
cursor: default;
}只读输入框通常显示浅灰色背景，鼠标移上去不会显示编辑光标。
:read-write
选中可编辑的表单元素，和 :read-only 相反。
input:read-write {
background-color: white;
}可编辑的输入框通常保持白色背景。
例子
增强表单交互体验
<form>
<label for="email">邮箱（必填）</label>
<input type="email" id="email" required placeholder="请输入邮箱">
<label for="phone">电话（可选）</label>
<input type="tel" id="phone" placeholder="请输入电话">
<button type="submit">提交</button>
</form>/* 获取焦点时的样式 */
input:focus {
border-color: #2563eb;
outline: 2px solid #bfdbfe;
}
/* 必填字段左侧加红色标记 */
input:required {
border-left: 3px solid #ef4444;
}
/* 可选字段左侧加灰色标记 */
input:optional {
border-left: 3px solid #d1d5db;
}
/* 验证通过时显示绿色边框 */
input:valid {
border-color: #10b981;
}
/* 验证失败时显示红色边框 */
input:invalid {
border-color: #ef4444;
}
/* 禁用状态 */
input:disabled {
background-color: #f3f4f6;
color: #9ca3af;
cursor: not-allowed;
}这个例子结合了多种输入伪类，让表单的状态反馈更清晰，用户体验更好。
复选框选中样式
<label>
<input type="checkbox" id="agree">
我同意服务条款
</label>/* 选中后文字变色 */
input[type="checkbox"]:checked + label {
color: #2563eb;
font-weight: 500;
}
/* 选中后复选框变色 */
input[type="checkbox"]:checked {
accent-color: #2563eb;
}当用户勾选复选框后，文字会变成蓝色并加粗，复选框本身也会显示蓝色勾选标记。
特点
- 输入伪类主要用于表单元素
- 根据用户交互状态自动匹配元素，不需要 JavaScript
:focus用于选中当前获取焦点的元素:disabled和:enabled用于区分可用和禁用状态:checked用于选中已勾选的复选框或单选按钮:required和:optional用于区分必填和可选字段:valid和:invalid用于根据验证规则反馈输入状态:placeholder-shown用于判断输入框是否为空:read-only和:read-write用于区分可编辑和只读状态- 输入伪类可以结合其他选择器使用，例如
input[type="email"]:focus
注意事项
:focus样式不要完全移除，否则键盘用户无法判断当前焦点位置:invalid不要在页面加载时就显示错误样式，可以结合:focus或:not(:placeholder-shown)使用:checked需要配合input[type="checkbox"]或input[type="radio"]使用:valid和:invalid依赖表单元素的验证属性，例如type="email"、required、pattern等:disabled元素不会响应用户交互，也不会提交表单数据- 不同浏览器对某些伪类的支持可能有差异，使用前最好测试兼容性
理解
可以把输入伪类理解为表单元素的”状态检测器”。
它让 CSS 能够自动识别用户正在操作哪个表单元素、元素是否被禁用、是否被选中、输入内容是否有效等状态，然后根据这些状态应用不同的样式。
这样做的好处是不需要写 JavaScript，就能让表单根据用户的操作实时反馈视觉效果，提升用户体验。
例如，当用户点击输入框时，边框高亮；当用户填写完邮箱地址后，边框变绿表示格式正确；如果格式错误，边框变红提示用户修改。
输入伪类的核心价值是用纯 CSS 实现表单的状态反馈，让用户明确知道当前操作的是哪个元素、操作是否有效、是否有错误需要修正。
引出
理解了输入伪类之后，可以继续学习 CSS 伪类，了解更多伪类的种类和用法。
也可以结合 CSS 表单样式，学习如何全面设置表单控件的显示效果。
配合 CSS 可访问性，让表单不只美观，也能更好地支持键盘导航和辅助技术。