html 勾选框样式,CSS自定义checkBox复选框- 对勾样式

有checkBox复选框需求时，我们所用的框架样式不符合，所以需要自己写 对勾样式，当然用图片也OK。

效果图：

html:

推送岗位*

全部

{{item.positionName}}

CSS：

//对号样式

.icon-span{

display: inline-block;

background-color: #fff;

border-radius: 4px;

border: 2px solid #7f7f7f;

position: relative;

width: 18px;

height: 18px;

vertical-align: middle;

}

.icon-span::after{

border: 2px solid transparent;

border-left: 0;

border-top: 0;

content: " ";

top: 2px;

left: 5px;

position: absolute;

width: 4px;

height: 8px;

-webkit-transform: rotate(45deg) scale(0);

transform: rotate(45deg) scale(0);

-webkit-transition: -webkit-transform .2s;

transition: -webkit-transform .2s;

transition: transform .2s;

transition: transform .2s, -webkit-transform .2s;

}

.icon-span-select{}

.icon-span-select::after{

border-color: #fff;

-webkit-transform: rotate(45deg) scale(1);

transform: rotate(45deg) scale(1);

}

后记

也写了vue的全选全不选功能，有需要请移步《VUEJS-全选&全不选》