I have a problem in highlight a label when an input radio is checked on IE7.
the code is very simple and you can take a look here: JsFiddle
I need to let it work on IE7 without using Javascript.
HTML:
<ul>
<li>
<input id="yes" type="radio" name="name" title="yes" />
<label for="yes">Yes</label></li>
<li>
<input id="no" type="radio" name="name" title="no" />
<label for="no">No</label>
</li>
</ul>
CSS:
input[type="radio"]{
position: absolute;
left: -9999px;
}
label{
background-color: yellow;
border: 1px solid #777;
cursor: pointer;
float: left;
margin-right: 10px;
padding: 10px;
width: 80px;
height: 30px;
}
input[type="radio"]:checked + label {
background-color: green;
color: #FFF;
}
IE 7不支持“:checked”
IE 7 doesn't really do your CSS3 selector, you will want to use: http://selectivizr.com/ to provide the CSS3 support to IE 7.
Without JS this is impossible to achieve.
You would need to add:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="selectivizr.js"></script>
<noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->
To your site to enable IE7 :selector support.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.