Как изменить фон у радиокнопки на 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.
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 и ниже. Для них придётся писать отдельный файл стилей, в которых оставить стандартные радиокнопки.
Комментариев 0