问题描述:
现有一个i标签模拟checkbox复选框的样式,后紧跟span标签里面显示文字,在这两个标签之上定为(position:absolute)一个input复选框(不可见),点击input时 i标签和变span换样式,但是再点击时,再i标签和span标签上不能选中;代码如下:
div{
position:relative;
}
i{
display:inline-block;
width:20px;
height:20px;
border:1px solid #eee;
}
span{
display:inline-block;
height:20px;
width:50px;
line-height:20px;
color:#595959;
}
input{
height:20px;
width:70px;
position:absolute;
visibility:hidden;
}
html:
<div>
<input type="checkbox">
<i></i><span>文字</span>
</div>
现点击一下input后能触发i标签变化,但是之后就不能点击了。‘
经查找,发现是在ie10,9,8,7下用position:absolute后得用background属性,所以在input css上
- background-color:#000;
- filter:alpha(opacity=0);
- opacity:0;