CSS3 - стиль радиовходов с помощью переключателя: selected в старых браузерах (ie7 / ie8)

Question

Я оформляю свои входные данные [type = radio] с помощью CSS, потому что мне нужно заменить радио по умолчанию изображением.На самом деле я скрываю элемент ввода и показываю стилизованную метку с фоном изображения.

Для этого я использую новые CSS3-селекторы "#myinputradio + label" и "myinputradio: checked + label».Все работает хорошо, используя последние версии каждого браузера (включая IE9), но мне нужно, чтобы он работал до IE7.

Я также могу сослаться на JQuery, но я хотел бы использовать тот же селектор CSSдля браузеров с поддержкой JS и CSS3 (у меня много радиовходов, и у каждого из них есть свое фоновое изображение, помещенное из общего спрайта).

Есть ли способ сделать это, поддерживая также старые браузеры?

Вот пример из 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

Это должно работать очень хорошо (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

Обратите внимание, что я намеренно добавил неправильный атрибут for в последний label (скрипка), чтобы показать, что делает (и должно произойти), когда вы присоединяете неправильный атрибут for к метке.

EDIT

Прочитайте комментарии для объяснения кода. Я добавил альтернативный способ определения стилявнутри комментарии (2х).

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 <9 с условным комментарием. </p>

jQuery

Хотя я мог бы просто использовать некоторые сценарии.В этом случае оставьте CSS как есть и добавьте что-нибудь для IE <9 (не проверено) </p>

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