在css中如何用checked选择选中状态元素

:checked 伪类用于选中处于选中状态的表单元素，如 radio、checkbox 和 option。通过结合兄弟选择器可实现样式切换，例如 checkbox 选中时文字变绿：#agree:checked + label { color: green; }。常用于隐藏默认控件并自定义外观，如 .custom-checkbox:checked + label::before 设置背景色。还可控制其他元素显示，实现纯 CSS 的展开收起效果，如 .menu-toggle:checked ~ .toggle-content 显示内容。该选择器适合创建无 JavaScript 交互。

在 CSS 中，可以通过 :checked 伪类选择器来选中处于“选中状态”的表单元素，主要用于 单选按钮（radio）、复选框（checkbox） 和 下拉选项（option）。

基本语法

:checked 会匹配当前被用户选中的这些控件：

• input[type="radio"] 被选中时
• input[type="checkbox"] 被勾选时
• <option> 被选中时（在 <select> 下拉菜单中）

用法示例

假设有一个 checkbox：

<input type="checkbox" id="agree">
<label for="agree">我同意条款</label>

你想在它被选中时让文字变绿，可以这样写 CSS：

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

#agree:checked + label {
  color: green;
}

这里使用了相邻兄弟选择器（+），表示选中被勾选的 checkbox 后面紧跟着的 label。

百度文心百中

百度大模型语义搜索体验中心

22

查看详情

配合隐藏元素实现自定义样式

常用于隐藏默认的 checkbox 或 radio，用 label 来显示自定义外观：

.custom-checkbox {
  display: none;
}

.custom-checkbox + label::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1px solid #ccc;
  margin-right: 8px;
}

.custom-checkbox:checked + label::before {
  background-color: blue;
  border-color: blue;
}

当 checkbox 被选中时，label 前的小方块会变成蓝色背景。

用于控制其他元素显示（如手风琴菜单）

利用 :checked 可以实现纯 CSS 的展开/收起效果：

.toggle-content {
  display: none;
}

.menu-toggle:checked ~ .toggle-content {
  display: block;
}

点击关联的 checkbox，就能显示对应内容。

基本上就这些。:checked 是一个非常实用的选择器，特别适合做无 JavaScript 的交互效果。关键是要结合 HTML 结构合理使用属性选择和兄弟选择器。

以上就是在css中如何用checked选择选中状态元素的详细内容，更多请关注php中文网其它相关文章！