CSS3 - 在旧版本的浏览器（ie7 / ie8）上使用： [英] CSS3 - Style radio inputs using the :checked selector on older browsers (ie7/ie8)
问题描述
我用CSS设计我的输入[type = radio]，因为我需要用图像替换默认收音机。
我实际上是隐藏输入元素，并显示带有图像背景的样式标签。
为此，我使用新的CSS3选择器#myinputradio + label和myinputradio：checked + label。
使用每个浏览器的最新版本（包括IE9）都可以正常工作，但我需要让它工作到IE7。
我也可以参考JQuery，但我想利用相同的CSS选择器为JS和CSS3准备的浏览器（我有很多无线电输入，每个有自己的背景图像，放置在一个公共的精灵）。
$ b这里有一个来自HTML的示例：
< input id =eurotype =radiovalue =eurochecked =name =currency>
< label for =euro>< / label>
这里的CSS用于风格：
#euro + label / *和所有其他复选框* / {
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;
}
如果您需要更多信息，请问我。
谢谢。
这应该工作得很好（Fiddle： http://jsfiddle.net/p5SNL/ ）：
//循环通过每个无线电输入元素
$（'input [type =radio]'）每个（function（）{
//检查下一个元素是否为标签，以及RADIO元素
//是否有名称（需要名称属性）
if（/label/i.test（$（this）.next（）[0]）。 tagName）&& this.name）{
//将onchange事件处理程序添加到RADIO输入元素
//只有当无线电元素更改值$ b时，THIS FUNCTION才会运行$ b $（this）.change（function（）{
//用一个name属性循环每个无线电输入元素
//等于当前元素的名称
$（'input [type =radio] [name ='+ this.name +']）每个（function（）{
/ *****
*下一行是一种有效的写法：
* if（this.checked）{//是否检查此元素？
* //将labelChecked类添加到下一个元素（标签）
* $（this）.next（）。addClass（labelChecked）;
*} else {
* //从下一个元素（标签）删除labelChecked类
* $（this）.next（）。removeClass（labelChecked）;
*}
***** /
$（this）.next（）[this.checked？addClass：removeClass]（labelChecked）;
/ *或者，设置CSS背景：
* CSS background = IFradio checked？ THENgreenELSEred
$（this）.next（）。css（background，this.checked？green：red）;
* /
}）;
}）; //事件处理程序声明结束
//如果它被选中则将labelChecked类添加到当前元素
if（this.checked）$（this）.next（）。addClass labelChecked）;
/ *另一种方法，设置一个CSS背景而不是一个className：
if（this.checked）$（this）.next（）css（background，green）;
* /
} // end of IF
}）; //通过所有RADIO元素结束循环
请注意，我故意添加了错误的 标签（fiddle），以显示当您附加错误的<$ c>
EDIT
阅读评论用于解释代码。我添加了一个替代方法来定义一个样式里面注释（2x）。
I'm styling my input[type=radio]'s with CSS, because I need to replace the default radio with an image. Actually what I am doing is hide the input element, and show the styled label with the image background.
To do this I'm using new CSS3 selectors "#myinputradio + label" and "myinputradio:checked + label". All works well using the last versions of each browser (including IE9), but I need to get it working up to IE7.
I can also refer on JQuery, but I'd like to exploit the same CSS selector for JS and CSS3-ready browsers (I have a lot of radio inputs and each one has its own background image, placed from a common sprite).
Is there any way to do this supporting also older browsers?
Here a sample from HTML:
<input id="euro" type="radio" value="euro" checked="" name="currency">
<label for="euro"></label>
And here the CSS used to style it:
#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;
}
If you need more informations, please ask me. Thanks.
This should work very well (Fiddle: 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
Note that I have deliberately added the wrong for attribute at the last label (fiddle), to show what does (and should) happen when you attach the wrong for attribute to a label.
EDIT
Read the comments for the explanation of the code. I have added an alternative way to define a style inside comments (2x).
这篇关于CSS3 - 在旧版本的浏览器（ie7 / ie8）上使用：的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
