【HTML】radio和checkbox樣式美化
阿新 • • 發佈:2019-02-19
僅提供記錄,怕忘記了
效果圖:
<span style="font-size:14px;"><span class="radio-span"> <input type="radio" name="" value="0" checked="checked" class="radioClass"/> </span> <div class="check-custom"> <input class="radioClass" type="checkbox" name="integral" value="1"/> </div> 樣式 .radio-span { width: 24px; height: 18px; padding-top: 3px; cursor: pointer;; text-align: center; margin-right: 10px; background-image: url(../image/inputradio.gif); background-repeat: no-repeat; background-position: -24px 0; display: inline-block; vertical-align: middle; } .radio-span > input { display: inline-block; } .on { background-position: 0 0; } .radioClass { opacity: 0; cursor: pointer; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } .check-custom { width: 20px; height: 20px; cursor: pointer; margin-left: 10px; text-align: center; background-image: url(../image/checkbox_01.gif); background-repeat: no-repeat; background-position: 0 0; display: inline-block; margin-right: 5px; } .check-on { background-position: 0 -21px; } </span>