input 的checkbox和radio 关联的label的样式,pc端可以正常点击并显示,手机端不能点击和正常显示样式,是否手机端不兼容?
测试连接http://test.kommi.cn/mobile/g...
高手指点下,在线等。。。。
pc端效果
代码
.km-option input[type="radio"], .km-option input[type="checkbox"]{
display:none;
}
.km-option input[type="radio"] + label, .km-option input[type="checkbox"] + label{
margin-right: 10px;
margin-top: 10px;
padding: 4px 5px;
display: inline-block;
font-size: 13px;
color: #999;
border-radius: 3px;
border: 1px solid #d1d1d1;
}
.km-option input[type="radio"]:checked + label, .km-option input[type="checkbox"]:checked + label{
border: 1px solid #ff6283;
}
<div class="km-option mui-text-center">
<input type="checkbox" id="checkbox_a1" />
<label for="checkbox_a1">复选框1</label>
<input type="checkbox" id="checkbox_a2" />
<label for="checkbox_a2">复选框2</label>
<input type="checkbox" id="checkbox_a3" />
<label for="checkbox_a3">复选框3</label>
<input type="radio" name="radio" id="radio1" value="radio1" />
<label for="radio1">红色</label>
<input type="radio" name="radio" id="radio2" value="radio2" />
<label for="radio2">白色</label>
<input type="radio" name="radio" id="radio3" value="radio3" />
<label for="radio3">粉色</label>
</div>
解决了,每个input+lable外层添加a标签或者其他标签即可
<input type="checkbox" id="checkbox_a1" />
<label for="checkbox_a1">复选框1</label>
<input type="checkbox" id="checkbox_a2" />
<label for="checkbox_a2">复选框2</label>
<input type="checkbox" id="checkbox_a3" />
<label for="checkbox_a3">复选框3</label>