css选择器如何选择checked状态输入框

:checked伪类 用于选中单选按钮、复选框和下拉选项，如 input[type=”checkbox”]:checked 设置选中边框；2. 结合 + 选择器 可改变相邻 label 样式，实现文本变色加粗；3. 配合~ 选择器能控制后续元素显隐，如 #toggle:checked ~ .content 显示内容；4. 不适用于文本输入框。

在 css 中，可以通过 :checked 伪类选择器 来选中处于选中状态的输入框，主要用于单选按钮（radio）、复选框（checkbox）以及下拉选项（option）。

使用 :checked 选择已选中的输入框

:checked 会匹配所有被用户选中的表单元素。例如：

input[type="checkbox"]:checked {border: 2px solid #007acc;}

这段样式会让被选中的复选框边框变为蓝色。

结合标签样式变化

通常我们会希望在选项被选中时改变其旁边的文本或图标样式。可以利用 配合~ 或 + 相邻兄弟选择器实现：

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

/* 假设结构如下：<input type="checkbox" id="agree"><label for="agree"> 我同意条款 </label> */ <p>input[type="checkbox"]:checked + label {color: green; font-weight: bold;}</p>

当复选框被选中时，对应的 label 文字变成绿色加粗。

如知 AI 笔记

如知笔记——支持 markdown 的在线笔记，支持 ai 智能写作、AI 搜索，支持 DeepseekR1 满血大模型

27

查看详情

用于切换显示内容

还可配合其他元素控制显隐。例如点击 checkbox 显示一个区域：

#toggle:checked ~ .content {display: block;} .content {display: none;}

当 id 为 toggle 的输入框被选中时，后面 class 为 content 的元素将显示出来。

基本上就这些常见用法，:checked 不支持纯文本输入框（text），只适用于有选中状态的控件。

以上就是