html checkbox樣式美化
阿新 • • 發佈:2018-11-30
1.html寫法
<label class="my_protocol">
<input class="input_agreement_protocol" type="checkbox" />
<span></span>
</label>
2.css寫法
/*隱藏掉我們模型的checkbox*/ .my_protocol .input_agreement_protocol { appearance: none; -webkit-appearance: none; outline: none; display: none; } /*未選中時*/ .my_protocol .input_agreement_protocol+span { width: 16px; height: 16px; background-color: red; display: inline-block; background: url(../../Images/TalentsRegister/icon_checkbox.png) no-repeat; background-position-x: 0px; background-position-y: -25px; position: relative; top: 3px; } /*選中checkbox時,修改背景圖片的位置*/ .my_protocol .input_agreement_protocol:checked+span { background-position: 0 0px }
效果圖:
demo 圖片: