css - input 的checkbox和radio 关联的label的样式，是否手机端不兼容？

问题描述

问 题

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="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>

<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>

这篇关于css - input 的checkbox和radio 关联的label的样式，是否手机端不兼容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！