纯CSS+HTML自定义checkbox效果

学习让我快乐```

于 2021-05-06 20:31:38 发布

阅读量166

点赞数

分类专栏：前端文章标签： css

原文链接：https://segmentfault.com/a/1190000003711140

版权

前端专栏收录该内容

25 篇文章

订阅专栏

本文介绍如何使用CSS和伪类`:checked`模拟HTML checkbox的选中状态，通过视觉反馈提高用户体验，即使实际checkbox被隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/* 隐藏所有checkbox */
input[type='checkbox'] {
  display: none;
}

/* 对label进行模拟.背景图片随便拼凑的，不要吐槽品味*/
/*   transition效果是做个背景切换效果，这里单纯演示而已，实际上这个过渡不加更自然*/
label {
  display: inline-block;
  width: 60px;
  height: 60px;
  position: relative;
  background: url(//www.chitanda.me/images/blank.png);
  background-position: 0 0px;
  -webkit-transition: background 0.5s linear;
}

/*  利用相邻选择符和checkbox`:checked`的状态伪类来模拟默认选中效果（就是点击后那个勾号的效果）  */
/*如果这段代码注释，点击后将没有任何反馈给用户*/
/*因为label本身是没有点击后被选中的状态的，checkbox被隐藏后，这个状态只能手动模拟*/
input[type='checkbox']:checked+label {
  background-position: 0 -60px;
}

摘自