2

有什么办法可以在 IE 中完成这项工作？我正在尝试设计一项调查，但它在 IE6 中不起作用，悬停在上面很好，但检查只是不起作用

CSS：

.A label {
    display:inline-block;
    background-color:#F36;
    padding:4px 11px;
    font-family:Arial;
    font-size:16px;
    width:775px;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}

.A label:hover{
    background-color: #C36;
}

.A input[type="radio"]:checked + label {
    background-color: #C36;
}

html:

<div class="A">
 <input type="radio" name="price" value="1" id="1PR" checked="checked" /><label for="1PR">£0-2</label><br />
 <input type="radio" name="price" value="2" id="2PR" /><label for="2PR">£3-£5</label><br />
 <input type="radio" name="price" value="3" id="3PR" /><label for="3PR">£6-£8</label><br />
 <input type="radio" name="price" value="4" id="4PR" /><label for="4PR">£9-£11</label><br />
 <input type="radio" name="price" value="5" id="5PR" /><label for="5PR">£12-£14</label>
</div>
4

2 回答 2

4

:checked直到 IE9 才支持伪类。

对于早期版本的 IE，没有办法使用纯 CSS 来实现。当单选按钮发生变化时，您需要使用 Javascript 添加一个类。下面是一个使用 jQuery 的例子：

$(document).ready(function() {
    $('input[type="radio"]:checked').addClass("checked");
    $('input[type="radio"]').change(function() {
        var $this = $(this);
        $("input.checked").removeClass("checked");
        if ($this.prop("checked")) {
            $this.addClass("checked");
        }
    });
});

你可以在这里看到这个代码：http: //jsfiddle.net/4RnbZ/1/

于 2013-05-13T19:47:14.047 回答
0

:checked css 选择器在 IE9 之前不支持

于 2013-05-13T19:48:51.193 回答