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

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

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

<input type=»radio» name=»name» />
<label for=»r_1″>Описание радиокнопки</label>
<input type=»radio» name=»name» />
<label for=»r_2″>Описание радиокнопки</label>

Отмечу важную вещь, что обязательно должен быть атрибут id у радиокнопки, плюс for на этот id у тега 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 и ниже. Для них придётся писать отдельный файл стилей, в которых оставить стандартные радиокнопки.

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

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

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

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

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

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

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

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

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

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

Как изменить цвет и фон в CSS? Свойства цвета и фона

Если с цветом все просто, то есть задали мы свойство color, и текст стал такого цвета, то с фоном немного сложнее. Это из-за того, что в CSS мы можем задать не только само изображение фона, и не только цвет фона, как в HTML, а можем задать дополнительные свойства, такие как повторение, расположение и фиксация. Сейчас я вам все это покажу на реальном примере.

Как задать фон страницы с помощью CSS?

Я открываю свой сайт. Он имеет фон — это изображение, которое повторяется вправо и вниз. Также мой сайт имеет изображение «Оставьте свой отзыв». Оно не повторяется, но при перемещении страницы оно фиксируется, то есть я прокручиваю страницу и всегда могу нажать эту кнопку. На самом деле эта тема уже немного другая. Она называется «Позиционирование элементов». Мы ее будем рассматривать в конце данного видеокурса. Вы наверняка спросите, почему я вам это сейчас показываю. А потому что с фоном можно сделать то же самое, то есть его можно повторять, его можно расположить в какой-либо части сайта и зафиксировать либо не зафиксировать.

Давайте перейдем в код таблицы стилей и опробуем все на практике. Для того, чтобы рассказать эту тему от начала до конца я удалю все, что мы ввели в свойство background:

Итак, приступим. Что нам нужно сделать первым делом? Нам нужно задать цвет фона. Почему цвет так важен? Он важен потому, что если у человека задан фон на сайте, но не задан цвет, то у посетителя, у которого отключено отображение картинок, вместо фона будет показан белый цвет. А теперь представьте, каково будет его возмущение, если на сайте, к тому же, цвет текста — белый. Это нужно предусмотреть. Мы создадим сейчас цвет фона.

Давайте определимся с тем цветом, который мы хотим задать фону. Для этого я прикладываю таблицу цветов к этому видеоуроку. Например, я хочу задать сайту голубой цвет #33CCFF. Естественно в таблице представлены не все цвета. Существуют и другие оттенки. Но здесь выделены основные — так называемые RGB-цвета. Первые две цифры отвечают за красный (Red), вторые — за зеленый (Green), третьи — за синий (Blue).

Фон мы задали. Давайте сохраним нашу страницу и проверим ее в браузере. Открываем. Мы видим, что цвет фона стал тем самым, который мы выбрали.

Снова перейдем в код. Сейчас мы зададим фоновое изображение. Как это сделать? Оно задается с помощью url, который есть адрес нашей страницы, то есть сейчас мы введем адрес изображения, которое хотим сделать фоном. Если мы откроем папку сайта, зайдем в папку img, то увидим, что у нас есть изображение bg.JPG. Пропишем его вместо нашего фона. Не забываем указывать папку img.

Давайте сохраним. Посмотрим, что получилось. Наше изображение стало фоном нашего сайта. Почему я сказал не «страницы», а «сайта»? Потому что если привязывать данный файл стилей к каждой странице, то в этом случае фон будет копироваться на все страницы, если, конечно, на страницах не задан фон по умолчанию.

Теперь давайте разберемся с повторением. Если мы перейдем на нашу страницу, то увидим, что фон — это лишь небольшое изображение, которое просто копируется вниз и вправо. Если мы отменим повторение, то на странице наше изображение будет выглядеть, как одно, и не будет размножено. Также стоит отметить, что можно выбрать только правое повторение и только нижнее повторение.

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

Чтобы оно не повторялось, нужно перед словом repeat поставить приставку no- .

Давайте сохраним и проверим, повторяется оно у нас или нет. Мы видим, что наше изображение не повторяется, поэтому оставшаяся часть фона залита выбранным нами цветом.

Повторение в CSS

Теперь давайте попробуем повторить его по оси Х (слева направо) и по оси Y (сверху вниз). Чтобы это сделать, нам нужно поставить repeate-x (по оси Х).

Сохраним. Сейчас изображение повторяется только по оси Х. Это очень полезная возможность для шапок или футеров сайта, где наше изображение копируется только вправо, а на него налагается какой-либо текст.

Чтобы скопировать изображение по оси Y, нам надо прописать repeate-y.

И оно у нас повторилось по оси Y.

Давайте поставим, чтобы изображение у нас не повторялось.

Фиксация в CSS

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

Перейдем в код и добавим слово fixed (фиксировать). По умолчанию стоит scroll.

Сохраним, обновим и переместим ползунок. Как мы видим, наше фоновое изображение передвигается вместе с ним. Как я уже показывал, на моем сайте по такому же принципу передвигается кнопочка «Оставить свой отзыв».

Позиционирование в CSS

Теперь давайте разберемся с позиционированием. Как таковое, позиционирование мы будем разбирать в конце данного видеокурса, сейчас мы научимся лишь позиционировать наше фоновое изображение. Для этого нам нужно указать отступы от верхнего и левого края. Указывать их можно как относительными, так и абсолютными значениями. Что это значит? Есть два типа единиц: относительная и абсолютная. Относительная единица— это пиксели, проценты и др. А абсолютная — это миллиметры, сантиметры. Сначала указывается значение отступа от левого края. Давайте попробуем поставить это значение в 20 пикселей, а потом укажем от верхнего края — 40 пикселей.

Сохраним и посмотрим, как все получилось. Получили два отступа: от левого и верхнего краев.

Если мы укажем значения отступов в абсолютных величинах, т.е. поставим, например, 2см и 4см:

то это выглядит соответственно.

Почему абсолютные значения называются абсолютными, а относительные — относительными? Сантиметр одинаков везде, поэтому он называется абсолютным, а проценты зависят, например, от размеров экрана: если на одном экране 10% — это примерно 3см, то на другом это может быть примерно 1см. Абсолютными величинами очень редко пользуются. В основном обходятся именно относительными: пикселями, процентами, есть еще такая буква «m» (величина зависит от буквы m), например:

Это означает «30 букв m в ширину и 20 — в высоту». Сохраняем. Получили желаемое. Такой прием используется в зарубежных странах. В России он используется достаточно редко, хотя бы потому, что буква m – буква английского алфавита.

Есть и другие относительные величины, но используются они совсем редко, поэтому я советую вам обходиться пикселями и процентами. Я делаю именно так.

Значения можно задавать еще и словами: если указать top (верх) и right (право).

То есть в верхнем правом углу у нас будет отображаться изображение. Если укажем bottom left:

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

Как задать цвет текста с помощью CSS?

На этом с фоном мы покончили и сейчас разберемся с цветом текста. С ним все просто. Он может принимать как значение кода (решетка и код RGB), так и значение словами (например, red – красный, purple – фиолетовый).

Есть несколько таких слов, которые браузер понимает, но, например, для оттенков таких слов нет. Например, #660066 – оттенок фиолетового цвета и для него нет соответствующего английского слова. Мы можем задать темно-серый цвет с помощью слова gray, но мы не можем задать какой-либо оттенок этого темно-серого цвета. Такого слова просто напросто нет. Поэтому нам нужно указывать код. Также код можно сократить. Если у вас первые два символа, вторые два символа и третьи два символа повторяются, то мы можем сократить каждый второй символ. Код оттенка фиолетового станет трехзначным кодом #606. Это дает браузеру понять, что первые два символа — две шестерки, вторые — два нуля и третьи — тоже две шестерки. Мы сохраним и проверим это сейчас. Ничего с цветом текста не изменилось.

На этом урок можно закончить. Возможно, это была немного трудная тема, но если вы поэкспериментируете, то в итоге будете с ней «на ты». До встречи в следующем видеоуроке, посвященному работе над текстом и его оформлением!

Как изменить цвет фона в css

Для изменения цвета фона применяется свойство background добавленное к селектору body , а для цвета текста используется свойство color , как показано в примере 1.

Пример 1. Изменение цвета веб-страницы

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Вид страницы, с измененным цветом фона и текста

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

CSS свойства background используются для создания эффектов на заднем фоне страницы.

Список свойств для стилизации заднего фона, которые будут
рассмотрены ниже:

• background-color
• background-image
• background-repeat
• background-position

Добавление фонового изображения

Следующие правила добавляют цвет фона и фоновое изображение к элементу . Затем мы задаем для элемента

Свойство background-color просто добавляет цвет фона на страницу или к определенному элементу. Мы использовали в примере background-color, чтобы установить фоновый цвет для элемента и внутри элемента

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

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

Повтор фонового изображения

По умолчанию фоновое изображение повторяется по вертикали и по горизонтали заполняя таким образом все доступное пространство в элементе. Повтор фонового изображения можно переопределить с помощью свойства background-repeat, рассмотрим его возможные значения:

• no-repeat — фоновое изображение не повторяется
• repeat-x — повторяет фоновое изображение только по горизонтали
• repeat-y — повторяет фоновое изображение по вертикали
• repeat — фоновое изображение занимает все доступное пространство повторяясь по горизонтали и вертикали (является значением по умолчанию)

Позиционирование фонового изображения

По умолчанию фоновое изображение располагается в верхнем левом углу окна браузера или элемента-контейнера. Если фоновое изображение не повторяется (background-repeat: no-repeat;) или должно повторяться с определенного места, то можно использовать свойство background-position, чтобы указать в каком месте окна браузера или элемента оно должно быть размещено. Это свойство обычно принимает два значения, разделяемые пробелом. Первое значение — положение по горизонтали, второе — по вертикали.

Свойство background-position может принимать в качестве значений ключевые слова: left, top, center, right и bottom. Вы можете использовать любую комбинацию ключевых слов:

• top left
• top center
• top right
• center left
• center center
• center right
• bottom left
• bottom center
• bottom right

Если будет указано только одно значение, то по умолчанию вторым значением будет center:

это то же самое что и:

Вы также можете использовать в качестве значений пиксели или проценты. Они определяют расстояние от верхнего левого угла окна браузера (или элемента-контейнера). Верхний левый угол соответствует значению 0% 0%.

Фиксация фонового изображения

Вы наверное не раз заходили на сайты, на которых задний фон остается на месте, а содержимое страницы прокручивается как бы над ним. Этот эффект достигается с помощью свойства background-attachment, которое определяет, должно ли фоновое изображение оставаться на одном месте или оно будет прокручиваться вместе с остальным содержимым веб-страницы.

Так как по умолчанию задний фон прокручивается вместе с содержимым, то в качестве примера мы зафиксируем наше фоновое изображение на одном месте с помощью значения fixed:

Объединение свойств

Можно получить тот же самый результат, что и в предыдущем примере, но с меньшим количеством строк кода. Для этого используется свойство background, которое позволяет установить значения свойств background-color, background-image, background-repeat, background-attachment, и background-position в объявлении всего одного свойства:

Несколько фоновых изображений

С помощью свойства background можно добавить несколько фоновых изображений к одному элементу. Для этого в качестве значения нужно указать список картинок, разделяя их запятой. Как и в случае с одной картинкой, к каждому фоновому изображению можно будет добавить дополнительные значения:

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

Стоит отметить, что порядок указания картинок имеет важное значение. Первое добавляемое изображение будет отображаться над всеми остальными, последнее под всеми остальными фоновыми изображениями. Мы можем увидеть как это работает, если первым фоновым изображением задать картинку, которая не имеет прозрачных областей, в этом случае она будет перекрывать все остальные картинки, заданные для фона:

Если переставить наши картинки местами, сделав первую последней в списке, то она будет отображаться под всеми остальными изображениями, задавая основной фон для элемента:

Фон для сайта HTML можно изменить как с помощью атрибутов тега body, так и с помощью CSS-стилей, примененных также к тегу body. Рассмотрим оба варианта как сделать фон для сайта.

Меняем цвет фона с помощью HTML

Тег body, как и практически любой HTML-тег имеет свои атрибуты. К атрибутам тега body относятся:

• bgcolor — определяет цвет фона для страницы;
• background — позволяет задать картинку в качестве фона веб-страницы (подробно этот вопрос рассмотрен в статье: Как сделать фон сайта картинкой HTML);
• scroll — управляет отображением полосы прокрутки на странице;
• text — задает базовый цвет текста, который будет выводиться на веб-странице;
• bgproperties — указывает, будет ли прокручиваться фон вместе со страницей;
• link — управляет цветом ссылок по умолчанию на странице;
• alink — устанавливает цвет для активной ссылки;
• vlink — определяет цвет для посещенной ссылки на странице;
• leftmargin/rightmargin — задает отступ контента от левого или правого края окна браузера;
• topmargin/bottommargin — задает отступ контента от верхнего или нижнего края окна браузера;

Чтобы изменить цвет фона с помощью HTML, воспользуемся атрибутом bgcolor:

Примечание: Рекомендуется определять цвет фона страницы, даже если фон белый. Это связано с тем, что некоторые пользователи могут использовать в браузере нестандартный цвет фона, и из-за этого текст на вашем сайте может быть нечитабельным.

Меняем цвет фона страницы с помощью CSS

Во избежании избыточности кода, рекомендуется всё, что связано с оформлением страницы, переносить на плечи CSS. К этому числу относится и задание цвета фона. CSS фон задается следующим образом:

В конструкторе сайтов "Нубекс" для любого сайта можно выбрать уже готовый фон из большой билиотеки изображений, или добавить свой.