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

P粉602998670 2025-11-27 00:00:00 次阅读

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

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

基本原理

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

HTML结构

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

CSS样式设置

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

.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;
}