input控件的checkbox属性自定义勾选框

落日映苍穹つ 2021-11-04 22:24 642阅读 0赞

思路  
  
    首先隐藏input默认勾选框  
    通过绑定label标签，设置label的样式来设置勾选框  
  
效果  
  
在这里插入图片描述  
代码  
  
\# html中input的checkbox定义，使用for循环创建多个checkbox并绑定到label上  
<div class="tab\_1" v-for="(i, index) in all\_stu\_ls">  
    <input :id="index" class="tab\_1\_title" type="checkbox" :value="i\['id'\]" v-model="check\_box\_ls">  
    <label :for="index">\{ \{i.stu\_name\}\}</label>  
</div>  
  
  
  
\# css中首先隐藏默认，再自定义设置label样式  
  
input\[type=checkbox\]\{    \# 隐藏默认样式  
    visibility: hidden;  
\}  
  
input\[type="checkbox"\] + label::before \{  
    content: "\\a0";  /\*不换行空格\*/  
    display: inline-block;  
    width: 5vw;  \# 设置选框的宽度  
    height: 5vw;  \# 设置选框的高度  
    margin-right: 4vw;    \# 选框距离label文字的距离  
    margin-left: -2vw;    \# 选框拒了左边界的距离  
    border-radius: 1vw;    \# 选框的圆角属性  
    background-color: silver;  
    text-indent: 0vw;  
    line-height: 5.2vw;    \# 涉及对钩的位置  
    vertical-align: 0vw;  
\}  
  
input\[type="checkbox"\]:checked + label::before \{  
    content: "\\2714";    \# 选中时的样式 \\2713是较细的对钩  
    color: \#FFFFFF;        \# 样式的颜色  
    background-color: yellowgreen;    \# 选中的背景色  
\}  
  
.tab\_1 label\{    \# label字体的样式  
    width: 60vw;  
    height: 16vw;  
    font-family: PingFangSC-Regular;  
    font-size: 4.3vw;  
    color: \#000000;  
\}  
  
  
    
  
    注意：1、其中的标签，文字的大小，单位需要根据自己的需求调整。2、文中的注释并不是使用html和css合法注释，需要自己手动删除。  
\---------------------  
作者：MrNoboday  
来源：CSDN  
原文：https://blog.csdn.net/MrNoboday/article/details/83067737  
版权声明：本文为博主原创文章，转载请附上博文链接！

转载于:https://www.cnblogs.com/xiaoshen666/p/10833702.html