我的网站的单选按钮在IE中不起作用

时间:2013-05-13 19:40:16

标签: html css

有没有办法在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>

2 个答案:

答案 0 :(得分:4)

IE9之前不支持:checked伪类。

对于早期版本的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/

答案 1 :(得分:0)

:IE9之前不支持检查css选择器