css :checked伪类如何控制复选框样式-css教程-PHP中文网

css :checked伪类如何控制复选框样式

P粉602998670

发布： 2025-10-14 17:51:01

原创

295人浏览过

:checked伪类用于设置被选中的复选框或单选按钮的样式，如input[type="checkbox"]:checked{accent-color:red;}改变勾选色；通过隐藏原生控件并结合label与相邻兄弟选择器（+）可自定义外观，例如.custom-checkbox input:checked + .checkmark::after显示自定义对号；利用#toggle:checked ~ #content可控制后续元素显示，实现点击展开内容等交互效果。

css :checked伪类如何控制复选框样式

使用 :checked 伪类可以针对被选中的复选框（checkbox）或单选按钮（radio）设置特定样式。它适用于 <input type="checkbox"> 或 <input type="radio"> 元素，当它们处于选中状态时触发。

基本语法与作用

:checked 选择器匹配所有被用户选中的表单控件，常见于复选框和单选按钮。

示例：

input[type="checkbox"]:checked {
  accent-color: red;
}

登录后复制

这段代码会让选中的复选框的勾选颜色变为红色。现代浏览器支持 accent-color 属性来快速改变原生控件的颜色。

自定义复选框外观（隐藏原生控件）

若想完全自定义样式，通常需要隐藏原生复选框，并用 CSS 构建视觉替代元素。

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

Chromox

Chromox是一款领先的AI在线生成平台，专为喜欢AI生成技术的爱好者制作的多种图像、视频生成方式的内容型工具平台。

184

查看详情

HTML 结构：

<label class="custom-checkbox">
  <input type="checkbox" hidden>
  <span class="checkmark"></span>
  我是自定义复选框
</label>

登录后复制

CSS 样式：

.custom-checkbox .checkmark {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #ccc;
  border-radius: 4px;
  margin-right: 8px;
  position: relative;
}

.custom-checkbox input:checked + .checkmark::after {
  content: "✔";
  color: green;
  font-size: 14px;
  position: absolute;
  top: -2px;
  left: 2px;
}

登录后复制

这里利用了相邻兄弟选择器（+）在输入框被选中时，修改旁边的 .checkmark 元素内容。

结合 label 实现更灵活控制

将 <input> 放在 <label> 内部或通过 for 关联，点击 label 即可切换选中状态，提升交互体验。

利用这种结构，还可以实现非表单元素的显示/隐藏，比如折叠菜单、弹出层等。

例子：点击切换内容显示

<input type="checkbox" id="toggle" hidden>
<label for="toggle">点我展开</label>
<div class="content" id="content">这里是隐藏内容</div>

<style>
#content { display: none; }
#toggle:checked ~ #content { display: block; }
</style>

登录后复制

通过 :checked 配合通用兄弟选择器（~），可以控制后续元素的显示状态。

基本上就这些。核心是理解 :checked 能响应用户选择行为，并结合其他 CSS 选择器实现样式或布局变化。不复杂但容易忽略细节，比如隐藏原生控件或正确使用标签关联。

以上就是css :checked伪类如何控制复选框样式的详细内容，更多请关注php中文网其它相关文章！