zoukankan      html  css  js  c++  java
  • input-checkbox选中及非选中样式设置

    html:

    <div class="way-choose">
        <input id="weuiAgree" type="checkbox" class="agreement-checkbox choose-way" checked>
    </div>
    

    css:

    .way-choose>input[type='checkbox']{
            background: none;
            background: white;
            -webkit-appearance: none;
            border: 1px solid gainsboro;
            outline:0;
        }
        .way-choose>input[type='checkbox']:before{
            font-family: weui;
            font-style: normal;
            font-weight: 400;
            font-variant: normal;
            text-transform: none;
            text-align: center;
            speak: none;
            display: inline-block;
            vertical-align: middle;
            text-decoration: inherit;
            content: "";
            color:white;
            font-size: 13px;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%,-48%) scale(.73);
            transform: translate(-50%,-48%) scale(.73);
            outline:0;
        }
        .way-choose>input[type='checkbox']:checked{
            background: #D6B887;
            -webkit-appearance: none;
            border: none;
            outline:0;
        }
        .way-choose>input[type='checkbox']:checked:before{
            font-family: weui;
            font-style: normal;
            font-weight: 400;
            font-variant: normal;
            text-transform: none;
            text-align: center;
            speak: none;
            display: inline-block;
            vertical-align: middle;
            text-decoration: inherit;
            content: "EA08";
            color:white;
            font-size: 13px;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%,-48%) scale(.73);
            transform: translate(-50%,-48%) scale(.73);
            border:none;
            outline:0;
        }
    

     js:选中的表达方式:

    if($('.agreement-checkbox')[0].checked){
        alert("已选中")
    }else{
        alert("未选中")
    }
    
  • 相关阅读:
    内置对象
    Angular 动画
    Angular_上拉刷新
    angular Observable
    【Nginx】nginx为目录或网站加上密码认证
    MongoDB笔记
    websocket服务器+客户端
    cli 中php的配置和phpinfo不一样
    linux设置时区和自动同步时间
    crontab & php实现多进程思路
  • 原文地址:https://www.cnblogs.com/haimengqingyuan/p/8395482.html
Copyright © 2011-2022 走看看