Как изменить фон у радиокнопки на CSS
Меня недавно попросили рассказать, как поменять фон у радиокнопки через CSS. Задача это не тривиальная, поскольку обычными путями фон радиокнопки не изменить. Однако, есть обходные пути, о которых я в этой статье и поведаю.
Привожу HTML-код:
<input class="r_button" type="radio" name="name" id="r_1" />
<label for="r_1">Описание радиокнопки</label>
<input class="r_button" type="radio" name="name" id="r_2" />
<label for="r_2">Описание радиокнопки</label>
Отмечу важную вещь, что обязательно должен быть атрибут 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 и ниже. Для них придётся писать отдельный файл стилей, в которых оставить стандартные радиокнопки.
-
Создано 13.03.2013 04:34:00
-
Михаил Русаков
Комментарии (6):
Спасибо
Ответить
Спасибо...
Ответить
Очень полезная статья... Спасибо!
Ответить
Все сделала вышеуказанным способом, все получилось, но.... Мое изображение кнопки снизу обрезается (картинка тоже кружок), т.е. размер backgrounda такой же как текст рядом и при увеличении размера шрифта картинка видна полностью, но мне нужно наоборот размер уменьшить. Как сделать так, чтобы картинка была полностью видна?
Ответить
Юлия, увеличьте размеры, добавьте padding, bottom.
Ответить
Добавила нижний padding у label, все получилось... тогда тоже пробовала, но что-то результата не было. Щас все норм. Спасибо!
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.