純css3單選框美化樣式
阿新 • • 發佈:2019-01-04
先將原單選框隱藏:display:none;
再美化。
<div class="select_btn">
<input type="checkbox" id="checkbox_meihua" class="checkbox_style" name="select" value="10天內自動登入" checked="checked">
<label for="checkbox_meihua"></label>
</div>
.select_btn{font-size: 14px ;padding: 0px 30px;margin-top: 5px;} .checkbox_style{display: none;} //先隱藏 label{display: inline;} .checkbox_style + label{ background-color: #FFF; border: 1px solid #e2e2e2; padding: 7px; display: inline-block; position: relative; float: left; } .checkbox_style:checked + label{ background-color: #fff; border: 1px solid #e5e5e5; color: #243441; } .checkbox_style:checked + label:after{ content: ' \2714'; position: absolute; top: 0px; left: 0px; width: 100%; padding: 0 0 1px; color: #758794; text-align: center; font-size: 12px; }