CSS3 - 在旧浏览器 (ie7/ie8) 上使用 :checked 选择器设置单选输入样式

Question

我正在使用 CSS 设置输入 [type=radio] 的样式，因为我需要用图像替换默认收音机。 实际上我正在做的是隐藏输入元素，并显示带有图像背景的样式标签。

为此，我使用了新的 CSS3 选择器“#myinputradio + label”和“myinputradio:checked + label”。 使用每个浏览器的最新版本（包括 IE9）都可以正常工作，但我需要让它工作到 IE7。

我也可以参考 JQuery，但我想为 JS 和 CSS3 就绪的浏览器使用相同的 CSS 选择器（我有很多无线电输入，每个都有自己的背景图像，从一个常见的精灵放置)。

有什么方法可以支持旧浏览器吗？

这里是 HTML 示例：

<input id="euro" type="radio" value="euro" checked="" name="currency">
<label for="euro"></label>

这里是用来设置样式的 CSS：

#euro + label /*and all other checkboxes*/ {
    display: inline-block;
    width: 37px;
    height: 37px;
    background: url(../img/sprites.png);
}

#euro + label {
    background-position: 1042px 898px;
}

#euro:checked + label {
    background-position: 1108px 898px;
}

如果您需要更多信息，请询问我。 谢谢。

Answer 1

这应该很好用（小提琴：http://jsfiddle.net/p5SNL/）：

//Loops through each radio input element
$('input[type="radio"]').each(function(){

    // Checks if the next element is a label, and whether the RADIO element 
    //  has a name or not (a name attribute is required)
    if(/label/i.test($(this).next()[0].tagName) && this.name){

        // Adds an onchange event handler to the RADIO input element
        // THIS FUNCTION will ONLY run if the radio element changes value
        $(this).change(function(){

            // Loop through each radio input element with the a name attribute
            //  which is equal to the current element's name
            $('input[type="radio"][name="'+this.name+'"]').each(function(){

                /*****
                 * The next line is an efficient way to write:
                 * if(this.checked){ // Is this element checked?
                 *     // Adds "labelChecked" class to the next element (label)
                 *     $(this).next().addClass("labelChecked");
                 * } else {
                 *     //Removes "labelChecked" class from next element (label)
                 *     $(this).next().removeClass("labelChecked");
                 * }
                 *****/
                $(this).next()[this.checked?"addClass":"removeClass"]("labelChecked");

                /* Alternatively, setting the CSS background:
                 * CSS background = IF "radio checked?" THEN "green" ELSE "red"
                $(this).next().css("background", this.checked?"green":"red");
                 */
            });

        }); //end of event handler declaration

        //Adds "labelChecked" class to the current element IF it's checked
        if(this.checked) $(this).next().addClass("labelChecked");
        /*Alternative way, setting a CSS background instead of a className:
        if(this.checked) $(this).next().css("background", "green");
         */

    } //end of IF

}); //end of the loop through all RADIO elements

请注意，我故意在最后一个 label（小提琴）中添加了错误的 for 属性，以显示当您将错误的 for 属性附加到标签时会发生什么（并且应该）。

编辑

阅读 cmets 以获得代码的解释。我添加了另一种在 cmets (2x) 中定义样式的方法。

Answer 2

我在这里看到两个问题：

内联块

部分问题在于这段代码：

#euro + label /*and all other checkboxes*/ {
    display: inline-block;
    width: 37px;
    height: 37px;
    background: url(../img/sprites.png);
}

IE7 不支持display:inline-block;

您可以尝试将其更改为 float。

:勾选

另外，IE7 与attribute selectors 存在问题。

所以#euro:checked 不起作用。

但这可能是#euro[checked]。如果是这样，您可以使用条件注释将其提供给 IE

jQuery

不过，我可能只是使用一些脚本。在这种情况下，请保留 css 并为 IE

$('#euro:checked').next('label').css('background-position','1108px 898px');