HTML结构是这样,就是一个模拟radio的东西,功能就是点击哪个选项,那个选项就打钩。
CSS的核心部分就是用:checked,使得input选中时就带上.checked-icon这个类。
.list-radio{
position: absolute;
left: -9999em;
}
/*
:checked匹配每个已被选中的 input 元素(只用于单选按钮和复选框)
*/
.list-radio:checked + .checked-icon{
/*打钩图片*/
background: url(../../../../image/checked.png) no-repeat;
background-size: 20px;
display: inline-block;
width: 20px;
height: 20px;
float: right;
}
在电脑上和安卓机上这样都没问题,但是在苹果机上就有问题了,要点两次那个勾的图片才会出现,但是checked的值在点第一次的时候已经变了。后来在label标签上加上了这个就可以了:
.list-label > * {
pointer-events: none;
}
pointer-events: none;是可以完全禁止点击事件的,那怎样解释禁止点击事件就可以了呢?我个人觉得是因为事件冒泡那方面,求正解!
https://developer.mozilla.org...
感谢题主分享,我也是第一次发现这个事情~~具体可以看看上面这个网址,希望可以帮助到你~