利用css将复选框设为透明并改变勾选样式

一、我们先写好HTML的代码

我这里是写的一个登录界面

 <label for="1"><input type="checkbox" id="1" class="ma"><span class="one"></span>记住密码</label><label for="2"><input type="checkbox" id="2" class="ma"><span class="two"></span>自动登录</label>

我们用span标签用来覆盖原有的checkbox
这是效果图

二、css代码添加

我们将原有的框改为透明

.ma {margin: 30px 0 30px 50px;width: 20px;height: 20px;cursor: pointer;opacity: 0;}

再修改span样式让他变成一个你想要的宽和高
代码如图

.ma[type=checkbox]+span{display: inline-block;border-radius: 2px;width: 20px;height: 20px;border: .02rem solid #0D1529;background-color: transparent;position: absolute;cursor: pointer;
}

完成之后效果大概是这样

透明的效果已经出来了
最后也是最重要的是点击之后的效果
我们可以用伪元素的方法

.ma[type=checkbox]:checked+span::after{content:'\2714' ;color: blue;position: absolute;font-size: 20px;left: 2px;bottom: -2px;
}

content里面可以放任意的特殊字符并且修改大小和颜色
最后我们就成功了

利用css将复选框设为透明并改变勾选样式相关推荐

通用样式 -表格的每行的复选框选中打印，清除已勾选
1,在el-table上加单选select2和全选selectAll的方法, 2,增加一列el-table-column <el-table @select="select2" ...
iview 动态控制 table中某一行select勾选框能否选中，以及某一行select勾选框能否显示(隐藏禁用的勾选框)。
如上图,这是一个vue页面中的table,在其columns中加了一个selection后,实现了多选/全选table行的功能: {type: 'selection',width: 60,align: ...
web前端-Vue element UI中的el-table勾选框展示隐藏；设置默认勾选、禁用
1.el-table如果我们想新增一个勾选框,在 .vue文件中 <el-table-column type="selection" width="55" ...
element ui表格勾选后勾选框置灰，不可再勾选
首先在 type="selection"的表格列里写上方法:selectable="checkSelectable" <el-table-column t ...
两个forEach数据遍历相同的数据在复选框打钩jsp页面复选框更具传过来的数据勾选
jsp页面:teleComList selectList 都是List<String> 是后台传递给前台的数据 <c:forEach items="${teleCo ...
多选框向后台传值，多选框的回显，对多选框的各种操作
1.多选框的回显: js:$( function(){ var checkBoxAll =$("input[name^='checkbox_']");//获取前缀为 ...
关于CheckBox勾选隐藏和显示，以及导出勾选的复选框的excel文档
前台显示页面: 然后点击展开按钮: 勾选展开或者收起里的复选框,或者勾选序号里的复选框,点击翻译后还会记住之前的勾选,点击excel导出,可以导出你任意勾选的复选框的数据,下面是对应的前台jsp,后台 ...
纯前端vue利用docxtemplater实现生成word文档下载 word模板，勾选框的默认勾选。。
首先需要下载如下工具: cnpm i docxtemplater pizzip jszip-utils file-saver -S 然后将它们引入: import JSZipUtils from &q ...
layui复选框怎么取值_layui获取多选框中的值方法
layui获取多选框中的值方法 HTML: title="=$value;?>"> js: $("input:checkbox[name='standard' ...

利用css将复选框设为透明并改变勾选样式

一、我们先写好HTML的代码

二、css代码添加

利用css将复选框设为透明并改变勾选样式相关推荐

最新文章

热门文章