IE7 CSS - 选中单选按钮时标签背景颜色不会改变

时间:2012-08-29 10:51:41

标签: html css internet-explorer-7

在IE7上检查输入广播时,我在突出显示标签时遇到问题。

代码非常简单,您可以在此处查看: JsFiddle

我需要在不使用Javascript的情况下让它在IE7上运行。

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

2 个答案:

答案 0 :(得分:1)

IE 7中不支持

“:checked”

答案 1 :(得分:0)

IE 7并不真正用于你的CSS3选择器,你需要使用:http://selectivizr.com/来为IE 7提供CSS3支持。

没有JS,这是不可能实现的。

您需要添加:

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

到您的网站启用IE7:选择器支持。