【基础】 CSS自定义对勾，选中和未选中状态 | 8月更文挑战复选框未选中时灰色小圆环，选中时显示有颜色的圆环以及圆环中

需求背景

目前在做小程序商城的购物车列表，遇到的选中和不选中的样式。这种样式，其实用背景图片可以轻松实现，但小程序的背景图必须用网络图片(可以上传到服务器)，或者base64格式的图片。由于不想被限制，也为了方便后续更改，所以想试一下css的实现方法。

知识点： css3中before与after选择器，兄弟选择器。

实现思路

未选中时：灰色圆环通过两个圆圈遮盖，达到效果；
选中时：添加class,改变外环背景色；添加内部对勾。

核心代码

小圆环

实现圆环，最简单的方式就是使用嵌套标签，设置border-radius就可以实现。这里为了使页面结构简便，我直接用伪类元素实现了。

<view class="checkbox">
</view>
.checkbox {
     width: 16px;
     height: 16px;
     background-color: #d8d8d8;
     border-radius: 50%;
 }
.checkbox::before{
   content: "";
   width: 14px;
   height: 14px;
   border-radius: 50%;
   background-color: #fff;
   position: relative;
   top: 1px;
   left: 1px;
 }

对勾 √

画一个带表框的长方形;
再设置把它的上边框，右边框设置为零,得到一个形似 L 形状的图形;
旋转-60° ,完成了。

.checkbox.checked {
   width: 16px;
   height: 16px;
   background-color: #2fd2fe;
   border-radius: 50%;
   position: relative;
 }

 .checkbox.checked::after {
   content: "";
   display: block;
   width: 6px;
   height: 4px;
   border: 1px solid #2fd2fe;
   border-right: none;
   border-top: none;
   transform: rotate(-60deg) translate(7px, -10px);
   position: absolute;
   top: 16px;
   left: 8.5px;
 }

附：用背景图的方式，看起来更简单一些。直接上代码，以便看官们拿走即用。

.checkbox {
   height: 40rpx;
   line-height: 40rpx;
   background: url(http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/checkbox-0e09baa37e.png) no-repeat;
   background-size: 34rpx;
 }
 .checkbox.checked {
   background: url(http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/checkbox-checked-822e54472a.png) no-repeat;
   background-size: 34rpx;
 }

总结

实现上述效果方法有很多，这里就不一一赘述了。对勾动态特效也会在后续的文章中进行补充更新，请看官们持续关注。原创不易，请多关照，点个赞，再走吧~