html部分
<label><input?type="checkbox">保存密碼</label>
css部分
使用偽類元素對checkbox樣式進行修改
邊框樣式在before中修改墨礁,"\2713"為字符表勾選字符
input[type="checkbox"] {
????width:?20px;
????height:?20px;
????display: inline-block;
????text-align:?center;
????vertical-align:?middle;
????line-height:?18px;
????margin-right:?10px;
????position:?relative;
}
input[type="checkbox"]::before {
????content:?"";
????position:?absolute;
????top:?0;
????left:?0;
????background:?#fff;
????width:?100%;
????height:?100%;
????border:?1px?solid?#d9d9d9;
????border-radius:?4px;
}
input[type="checkbox"]:checked::before {
????content:?"\2713";
????background-color:?#fff;
????position:?absolute;
????top:?0;
????left:?0;
????width:?100%;
????border:?1px?solid?#7D7D7D;
????border-radius:4px;
????color:?#7D7D7D;
????font-size:?20px;
????font-weight:?bold;
}