修改checkbox默认样式的博客和文章有很多,但针对于jquery mobile中的没有类似的文章,刚好借鉴了别人的博客,贴出我的代码,实现修改jquery mobile 中的checkbox的默认样式,如下效果:
html代码:
<li class="checkbox_left popu_style stard_i_checkbox" id="ma_assist_li" data-role="none">
<label data-role="none">
<input id="ma_assist" type="checkbox" name="sport" hidden data-role="none"/>
<i data-role="none"></i>
第一个checkbox
</label>
</li>
<li class="checkbox_left popu_style stard_i_checkbox" id="ma_assist_li" data-role="none">
<label data-role="none">
<input id="ma_assist_two" type="checkbox" name="sport" hidden data-role="none"/>
<i data-role="none"></i>
第二个checkbox
</label>
</li>
css代码:
/*设置单选框的样式*/
.stard_i_checkbox i{
width:20px;
height:20px;
border:1px solid #999;
border-radius: 50%;
display: inline-block;
vertical-align: middle;
margin-right: 15px;
background: url(../img/check_noselect.png) center center no-repeat #BEBEBE;
}
.stard_i_checkbox label input[type="checkbox"]:checked +i{
background: url(../img/check_select.png) center center no-repeat #FF5643;
background-size: 15px 15px;
border: 1px solid #FF5643;
}
.checkbox_left{
text-align: left !important;
padding-left: 0.2em !important;
}