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>

阅读 7.5k
3 个回答

解决了,每个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>

.km-option input[type="radio"], .km-option input[type="checkbox"]{

display:none;

}

为什么要隐藏,把这段样式去掉看看

是的,我也刚发现,移动端有点不兼容。。。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题