WEB лаборатория DLE » Другое для WEB » Разное и другое » Как изменить фон у радиокнопки на CSS
Навигация
Популярное
    Статистика

    Материалов: 1789 [+0]
    Пользователей: 685 [+0]

    Всего онлайн : 5
    Пользователей: 0
    Гостей: 5


    Последние комментарии
    ...
    HI-tech:
    0

    Как изменить фон у радиокнопки на CSS

    Как изменить фон у радиокнопки на CSS


    Меня недавно попросили рассказать, как поменять фон у радиокнопки через CSS. Задача это не тривиальная, поскольку обычными путями фон радиокнопки не изменить. Однако, есть обходные пути, о которых я в этой статье и поведаю.

    Привожу HTML-код:

    Описание радиокнопки

    Описание радиокнопки


    Отмечу важную вещь, что обязательно должен быть атрибут id у радиокнопки, плюс for на этот id у тега label. Без этого ничего работать не будет.

    И CSS-код:
    .r_button {
    display: none;
    }

    .r_button + label {
    background: url("radio.png") no-repeat scroll 0 0;
    cursor: pointer;
    padding-left: 25px;
    }

    .r_button:checked + label {
    background: url("radio_active.png") no-repeat scroll 0 0;
    }

    Сразу скажу, что "+" означает, что стиль должен быть применён к label, следующему после .r_button.


    Теперь поясню, как это работает. Мы скрываем вообще радиокнопку, то есть она не показывается. Зато у label мы ставим поле слева, плюс слева ставим фон неактивной радиокнопки. Однако, мы с Вами поставили for у label. Следовательно, по клику на метке, у нас радиокнопка включается. Следовательно, срабатывает селектор ".r_button:checked + label", который меняет у нас фон label.

    Как только идёт переключение на другую кнопку, сразу возвращаемся к неактивному фону.

    Вот таким хитрым образом можно поменять фон у радиокнопки через CSS, а также сделать свой вид "активности".

    Отмечу, что данный способ работает во всех современных браузерах, за исключением IE8 и ниже. Для них придётся писать отдельный файл стилей, в которых оставить стандартные радиокнопки.



    Теги:

    Другие новости по теме:


    Информация
    Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.