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>

 

 

posted @ 2020-02-05 21:28  到此灬一游丿  阅读(375)  评论(0编辑  收藏  举报