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("未选中")
}

 

转载于:https://www.cnblogs.com/haimengqingyuan/p/8395482.html