900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > html 勾选框样式 CSS自定义checkBox复选框- 对勾样式

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

时间:2020-01-27 10:10:57

相关推荐

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-全选&全不选》

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。