checkbox 样式重写 | 易学教程

css样式

        .me-checkbox:checked {
            background: #1673ff        　　　　　}

        .me-checkbox {
            outline: none;/*轮廓*/
            width: 25px;
            height: 25px;
            background-color: #ffffff;
            border: solid 1px #dddddd;
            /* -webkit-border-radius:50%; */
            border-radius: 50%;
            font-size: 0.8rem;
            margin: 0;
            padding: 0;
            position: relative;
            display: inline-block;
            vertical-align: top;
            -webkit-appearance: button; /*让元素看的像一个button*/           
            -webkit-user-select: none;  /*让元素无法选择*/
            user-select: none;
            -webkit-transition: background-color ease 0.1s;
            transition: background-color ease 0.1s;
        }

        .me-checkbox:checked::after {/*这个是划勾*/
            content: '';
            top: 5px;
            left: 5px;
            position: absolute;
            background: transparent;
            border: #fff solid 2px;           
            border-top: none;
            border-right: none;            
            height: 6px;
            width: 10px;
            -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }
        #ccc{
            outline:#00FF00 dotted thick;
            width: 25px;
            height: 25px;
            background-color: #ffffff;
            border: solid 1px #dddddd;
            /* -webkit-border-radius:50%; */
            border-radius: 50%;
            display: inline-block;
            -webkit-appearance: button;
        }
        #ccc:checked{
            background-color: green;
        }

html样式

<input name-checkbox="checkbox" type="checkbox" class="me-checkbox ">
    <input name-checkbox="checkbox" type="checkbox" class="me-checkbox ">
    <input name-checkbox="checkbox" type="checkbox" class="me-checkbox ">
    <input type="checkbox"  name-checkbox="" id="ccc">
    <script >
        var d=document.querySelector("#ccc");
        d.onclick=function(){
           console.log(d.checked);
       }
    </script>

来源：https://www.cnblogs.com/finghi/p/12266724.html

标签

checkbox样式