css :checked伪类如何控制复选框样式_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-10-14

浏览次数：次

返回列表

: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 构建视觉替代元素。

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 元素内容。

察言观数AskTable

企业级AI数据表格智能体平台

78 查看详情察言观数AskTable

结合 label 实现更灵活控制

将 <input> 放在 <label></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伪类如何控制复选框样式的详细内容，更多请关注其它相关文章！

# 两种类型 # 如何从零开始学seo # 富阳建设局网站首页 # 百货高端推广营销方案 # 忻州网站推广哪家强 # 白城网站关键词优化技巧 # 京山seo获客平台 # 苏州抖音关键词供应商排名 # 率土之滨的广告推广营销 # 佛山广告网站推广建设 # 禹州本地网站建设推广 # 我是 # css # 勾选 # 并结合 # 中不 # 表单 # 单选 # 自定义 # 选择器 # 复选框 # red # 浏览器 # html