CSS中:checked伪类应用与自定义复选框样式

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《CSS中:checked伪类用于选择被选中的复选框，并可用来自定义其样式。以下是一个简单的示例：<input type="checkbox" id="myCheckbox">选项/* 默认状态下的样式 */ input[type="checkbox"] { width: 20px; height: 20px; margin-right: 10px; } /* 被选中时的样式 */ input[type="checkbox"]:checked { accent-color: #007BFF; /* 改变复选框颜色 */ }说明：:checked 是一个伪类选择器，用于匹配被选中的表单元素（如 <input type="checkbox"> 或 <input type="radio">）。accent-color 属性可以用来改变复选框的默认颜色，适用于现代浏览器（如 Chrome、Edge 等）。兼容性注意：accent-color 并不是所有浏览器都支持，如果你需要更一致的样式效果，可以使用自定义复选框样式的方法，例如通过隐藏原生复选框并用 CSS 创建自定义外观。自定义复选框样式示例： <input type="checkbox" id="myCheckbox">》，聊聊，希望可以帮助到正在努力赚钱的你。

:checked伪类用于选中状态的复选框或单选按钮，可改变其样式或联动其他元素；通过accent-color可修改默认颜色，结合label与隐藏input能自定义外观，利用兄弟选择器可实现无JS的折叠菜单等交互效果。

当处理复选框的样式时，:checked 伪类选择器非常有用。它能选中处于“选中”状态的单选按钮或复选框，让你可以基于用户交互动态改变样式。

基本用法

:checked 可用于 input[type="checkbox"] 或 input[type="radio"] 元素，匹配当前被选中的控件。

例如：

input[type="checkbox"]:checked {
  accent-color: #4caf50;
}

这段代码会将选中的复选框颜色设为绿色。现代浏览器默认支持 accent-color 属性来简单修改复选框颜色。

自定义复选框样式

如果想完全替换原生复选框外观，通常结合 label 和隐藏的 input 使用。

• 隐藏原始复选框（使用 opacity: 0 或 display: none）
• 用 label 模拟视觉样式
• 通过 :checked 控制 label 的显示效果

示例代码：

.custom-checkbox {
  display: none;
}

.checkbox-label {
  position: relative;
  padding-left: 30px;
  cursor: pointer;
}

.checkbox-label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: 2px solid #999;
  background-color: white;
}

.checkbox-label::after {
  content: '✔';
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: white;
  opacity: 0;
}

.custom-checkbox:checked + .checkbox-label::after {
  opacity: 1;
}

.custom-checkbox:checked + .checkbox-label::before {
  background-color: #4caf50;
  border-color: #4caf50;
}

配合其他元素联动

:checked 不仅能改变自身样式，还能控制其他元素的显示，比如制作无 JS 的折叠菜单或开关组件。

利用兄弟选择器（+ 或 ~），可以实现选中后展开内容：

.panel {
  display: none;
}

.toggle:checked ~ .panel {
  display: block;
}

基本上就这些。使用 :checked 配合 label 和 CSS 生成内容，能做出美观且可访问的复选框样式，无需 JavaScript。关键是结构清晰，确保可点击区域足够大，提升用户体验。

理论要掌握，实操不能落！以上关于《CSS中:checked伪类应用与自定义复选框样式》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！