zoukankan      html  css  js  c++  java
  • 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>

     

  • 相关阅读:
    spring中@value注解需要注意
    mysql创建utf-8字符集数据库
    Access denied for user 'root'@'localhost' (using password:YES) 解决方案[转]
    MySql 5.7.20安装
    Shiro 登录认证源码详解
    为什么说Java匿名内部类是残缺的闭包
    Java中的闭包之实例一
    使用Eclipse的Working Set管理项目
    glibc下载安装
    Struts2 整合 Hibernate 框架
  • 原文地址:https://www.cnblogs.com/mtxcat/p/13460156.html
Copyright © 2011-2022 走看看