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

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

效果图：

html:

 <div class="msg-position c-bg-wt"><p>推送岗位<i class="c-rd">*</i>&nbsp;&nbsp;&nbsp;&nbsp;<i class="icon-span" :class="{'icon-span-select' : chkAllStatus, 'brand-btn':  chkAllStatus, 'brand-b':  chkAllStatus}" @click="chkAll"></i>全部</p><div v-for="item in positions" class="msg-position-div hidden"><p style="white-space: nowrap;overflow:hidden;text-overflow: ellipsis;"><i @click="chkPosition(item)" class="icon-span" :class="{'icon-span-select' : item.isActive, 'brand-btn':  item.isActive, 'brand-b':  item.isActive}"></i>{{item.positionName}}</p></div></div>

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

CSS自定义checkBox复选框- 对勾样式相关推荐

纯CSS设置Checkbox复选框控件的样式
下面是纯CSS设置Checkbox复选框控件的五种简单样式,有兴趣的可以进行改动将其变成自己想要的样式. 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观.要做到点需要 ...
关于表格前面checkbox复选框不打勾的问题
当点击左边的树节点的时候,让右边的表格自动选中相应的行,但是选中的行前面如果有checkbox,可能复选框虽然选中了但是不打上勾,解决方案,将遍历表格数据那段代码用延时器包裹一下.
checkbox 选中_纯CSS修改checkbox复选框样式
效果图: 移入:
checkbox复选框样式
随着现代浏览器的流行,纯CSS设置checkbox也变的很是实用,下面会讲到5种与众不同的checkbox复选框. 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观.要 ...
uview Checkbox 复选框勾选，删除某一项遇见的bug，复用导致的问题
uview Checkbox 复选框勾选,删除某一项遇见的bug 如下图,所示,正常新建了子任务123,1跟3勾选. 紧接着删除子任务2,发现原本子任务3勾选消失了查看里面保存勾选的值,的的确确有两 ...
android勾选控件_Android中CheckBox复选框控件使用方法详解
CheckBox复选框控件使用方法,具体内容如下一.简介 1. 2.类结构图二.CheckBox复选框控件使用方法这里是使用java代码在LinearLayout里面添加控件 1.新建Linea ...
【PHPWord】如何解决PHPWord的输出checkbox复选框并设置checked已勾选
目录一.需求二.基于XML的实现方式三.兼容性强的实现方式三.总结一.需求对于生成Word文档来说,复选框的勾选状态和非勾选状态的展示是一个非常常见的问题. 需要用到复选框的文档大概有这几 ...
layui table勾选框的修改_Layui默认选中table的CheckBox复选框方法_飛雲_前端开发者...
方法一:如何根据条件判断是否默认选中table表格前面的复选框 table.render({ elem: '#userTable' , url: '../sysRole/getUserList' , ...
Ext.form.field.CheckBox复选框和Ext.form.field.Radio单选框
1.Ext.form.field.CheckBox和Ext.form.field.Radio主要配置项目配置项类型说明 boxLabel String 紧靠复选框的文字描述 boxLabelAl ...

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

效果图：

html:

CSS：

后记

CSS自定义checkBox复选框- 对勾样式相关推荐

最新文章

热门文章