CSS伪类:checked与::after结合实现选中图标_使用:checked ::after显示对勾-css教程-PHP中文网

CSS伪类:checked与::after结合实现选中图标_使用:checked ::after显示对勾

P粉602998670

发布： 2025-11-27 16:13:14

原创

542人浏览过

使用CSS的:checked伪类和::after伪元素可在复选框或单选按钮选中时显示自定义对勾图标；2. 通过隐藏原生input，利用label模拟控件外观，并在选中状态下通过伪元素插入对勾符号；3. 可结合transform、border技巧和transition优化视觉效果，实现平滑动画与精致样式。

css伪类:checked与::after结合实现选中图标_使用:checked ::after显示对勾

使用CSS的:checked伪类和::after伪元素，可以实现复选框或单选按钮选中时显示自定义对勾图标的效果。这种方法无需额外HTML标签，完全通过CSS控制视觉表现。

基本原理

:checked 用于匹配被选中的表单元素（如input[type=checkbox]或input[type=radio]）。::after 是一个伪元素，可在选中状态后插入装饰性内容。将两者结合，可以在用户点击选择后显示对勾等图标。

HTML结构

使用一个隐藏的原生input，搭配label来实现可点击区域：

<input type="checkbox" id="myCheck" class="hidden-checkbox">
<label for="myCheck" class="custom-checkbox"></label>

登录后复制

CSS样式设置

通过CSS隐藏原始输入框，用label模拟成可视化控件，并在选中时显示对勾：

Spacely AI

为您的房间提供AI室内设计解决方案，寻找无限的创意

查看详情

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

.hidden-checkbox {
  display: none;
}

.custom-checkbox {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #999;
  border-radius: 4px;
  position: relative;
  cursor: pointer;
}

.hidden-checkbox:checked + .custom-checkbox::after {
  content: '✓';
  font-size: 18px;
  color: #4CAF50;
  position: absolute;
  top: -2px;
  left: 3px;
}

登录后复制