标签:col back nsf display padding transform import ber border
获取checkbox选中的状态
$("#checkbox").is(":checked");
设置 checkbox 的状态
$("#checkbox").attr("checked", true);//设置为选中状态 $("#checkbox").attr("checked", false);//设置为未选中状态
用css对checkbox进行样式修饰
这是效果图
<div class="checkbox" style="height: 21px;"> <input id="remember" type="checkbox" name=""> <label for="remember"></label> </div>
.checkbox { height: 21px; line-height: 21px; font-size: 13px; margin-top: 0px !important; margin-bottom: 0px !important; } .checkbox input[type="checkbox"] { opacity: 0; z-index: 1; width: 20px; height: 20px; } .checkbox label { display: inline-block; position: relative; padding-left: 5px; } .checkbox label::before { content: ""; display: inline-block; position: absolute; width: 18px; height: 18px; left: -13px; top: -13px; margin-left: -14px; border: 1px solid #cccccc; border-radius: 3px; -webkit-transition: border 0.3s ease-in-out, color 0.3s ease-in-out; -o-transition: border 0.3s ease-in-out, color 0.3s ease-in-out; transition: border 0.3s ease-in-out, color 0.3s ease-in-out; } .checkbox label::after { content: ‘‘; position: absolute; left: -21px; top: -12px; width: 6px; height: 12px; border: 0; border-right: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transition: border 0.3s ease-in-out, color 0.3s ease-in-out; -o-transition: border 0.3s ease-in-out, color 0.3s ease-in-out; transition: border 0.3s ease-in-out, color 0.3s ease-in-out; } .checkbox input[type="checkbox"]:checked + label::before { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; background-color: #4d8bfc; border-color: #4d8bfc; } .checkbox input[type="checkbox"]:checked + label::after { background-color: #4d8bfc; }
标签:col back nsf display padding transform import ber border
原文地址:https://www.cnblogs.com/duanzb/p/9229196.html