<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

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

В рамках упражнений курса Вы параллельно со мной будете создавать свою большую программу на Java, что даст Вам необходимую практику, после которой для Вас уже не будет разницы, какого размера создавать программы.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

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

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (6):

ghhgghhggh ghhgghhggh 13.03.2013 15:58:14

Спасибо

Ответить

ilyadenisovid ilyadenisovid 18.03.2013 16:46:55

Спасибо...

Ответить

jull jull 26.02.2014 01:48:50

Очень полезная статья... Спасибо!

Ответить

jull jull 27.02.2014 17:37:21

Все сделала вышеуказанным способом, все получилось, но.... Мое изображение кнопки снизу обрезается (картинка тоже кружок), т.е. размер backgrounda такой же как текст рядом и при увеличении размера шрифта картинка видна полностью, но мне нужно наоборот размер уменьшить. Как сделать так, чтобы картинка была полностью видна?

Ответить

tikkiwiki tikkiwiki 04.03.2014 14:06:30

Юлия, увеличьте размеры, добавьте padding, bottom.

Ответить

jull jull 04.03.2014 18:23:29

Добавила нижний padding у label, все получилось... тогда тоже пробовала, но что-то результата не было. Щас все норм. Спасибо!

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.