如何在CSS中使用:checked选择器_控制选中复选框或单选框样式-css教程-PHP中文网

如何在CSS中使用:checked选择器_控制选中复选框或单选框样式

P粉602998670

发布： 2025-11-29 19:06:06

原创

876人浏览过

:checked伪类可改变选中状态的表单元素样式，常用于自定义复选框和单选按钮外观。通过隐藏原生input并结合label与伪元素，可创建带对勾或圆形选中效果的控件；利用+或~选择器还能控制其他元素显示，如实现无JS的折叠面板。该方法提升视觉交互且保持可访问性，适用于checkbox、radio等类型。

如何在css中使用:checked选择器_控制选中复选框或单选框样式

当用户与表单中的复选框（checkbox）或单选按钮（radio button）交互时，可以通过CSS的 :checked 伪类选择器来改变其样式。这个选择器能匹配处于“已选中”状态的 input 元素，常用于创建自定义的、更美观的控件外观，而无需依赖JavaScript。

基本语法与作用

:checked 选择器适用于 type 为 checkbox、radio 或 option 的元素。一旦这些元素被选中（例如用户点击了复选框），:checked 规则就会生效。

示例：

input[type="checkbox"]:checked {
  accent-color: green; /* 改变原生复选框颜色 */
}

登录后复制

上面的代码会将所有被选中的复选框的颜色改为绿色。这是最简单的用法，但若想完全自定义样式，通常需要配合隐藏原生控件并使用标签（label）和伪元素来实现视觉效果。

结合 label 和隐藏输入框实现自定义样式

为了更灵活地控制外观，常见做法是隐藏原始的 input，并利用 label 关联 input 来触发选中状态，再通过 + 或 ~ 选择器影响后续元素的样式。

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

HTML 示例：

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

登录后复制

CSS 示例：

/* 隐藏原生复选框 */
input[type="checkbox"] {
  display: none;
}
<p>/<em> 自定义 label 样式 </em>/
input[type="checkbox"] + label::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid #ccc;
border-radius: 4px;
margin-right: 8px;
vertical-align: middle;
}</p><p>/<em> 当复选框被选中时，添加对勾 </em>/
input[type="checkbox"]:checked + label::before {
background-color: #4CAF50;
border-color: #4CAF50;
content: "✔";
color: white;
font-size: 12px;
text-align: center;
line-height: 16px;
}

登录后复制

在这个例子中，label 前面的伪元素充当了可视化复选框。当 input 被选中时，:checked 状态触发，伪元素变为绿色并显示对勾。

神采PromeAI

将涂鸦和照片转化为插画，将线稿转化为完整的上色稿。

103

查看详情

控制其他元素的显示（如展开内容）

利用 :checked 还可以控制页面中其他元素的显示或布局变化，比如实现无 JavaScript 的折叠面板。

示例：点击复选框显示一段说明

<input type="checkbox" id="toggle-info">
<label for="toggle-info">点击查看说明</label>
<div class="info-panel">
  这是一段被隐藏的信息。
</div>

登录后复制

CSS：

.info-panel {
  display: none;
}
<h1>toggle-info:checked ~ .info-panel {</h1><p>display: block;
}

登录后复制

这里使用了通用兄弟选择器 ~，当复选框被选中时，后面的 .info-panel 会显示出来。这种技巧在制作FAQ、选项设置等场景非常实用。

单选按钮的样式控制

对于 radio 按钮，原理相同。可以用来创建自定义的圆形选中效果。

input[type="radio"] {
  display: none;
}
<p>input[type="radio"] + label::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid #999;
border-radius: 50%;
margin-right: 8px;
vertical-align: middle;
}</p><p>input[type="radio"]:checked + label::before {
background-color: #333;
box-shadow: inset 0 0 0 4px white; /<em> 内部白点效果 </em>/
}

登录后复制

这样就能做出类似移动端的圆形单选按钮，选中时中间有一个小白点。

基本上就这些。:checked 是一个强大且轻量的方式，让表单控件更具交互性和视觉吸引力，同时保持语义化和可访问性。关键是合理使用 label 关联和相邻/兄弟选择器来扩展样式控制范围。不复杂但容易忽略细节，比如隐藏原生控件时要确保仍可通过键盘访问。

以上就是如何在CSS中使用:checked选择器_控制选中复选框或单选框样式的详细内容，更多请关注php中文网其它相关文章！