zoukankan      html  css  js  c++  java
  • input控件的checkbox属性自定义勾选框

    思路

        首先隐藏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;
        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字体的样式
        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
    版权声明:本文为博主原创文章,转载请附上博文链接!

  • 相关阅读:
    896. Monotonic Array单调数组
    865. Smallest Subtree with all the Deepest Nodes 有最深节点的最小子树
    489. Robot Room Cleaner扫地机器人
    JavaFX
    《Python CookBook2》 第一章 文本
    《Python CookBook2》 第一章 文本
    《Python CookBook2》 第一章 文本
    《Python CookBook2》 第一章 文本
    《Python CookBook2》 第一章 文本
    《Python CookBook2》 第一章 文本
  • 原文地址:https://www.cnblogs.com/xiaoshen666/p/10833702.html
Copyright © 2011-2022 走看看