Question

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

要做到这一点，我正在使用新的CSS3选择器“#myinputradio + label”和“myinputradio：checked + label”。一切都运行良好使用每个浏览器的最新版本（包括IE9），但我需要让它适用于IE7。

我也可以参考JQuery，但我想为JS和CSS3-ready浏览器利用相同的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

请注意，我故意在最后for（小提琴）添加了错误的label属性，以显示在将错误的for属性附加到的时候（和应该）发生的情况标签。

修改

阅读注释以获取代码说明。我添加了一种在注释中定义样式的替代方法（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＆lt; 9。

<强>的jQuery

我可能只是使用一些脚本。在这种情况下，保持css不变，并为IE＆lt; 9（未经测试）

添加一些内容

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

CSS3 - 在旧浏览器上使用：checked选择器的样式无线电输入（ie7 / ie8）

2 个答案:

修改