JQuery mobile 中修改checkbox默认样式

修改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;
}