Меню

Как изменить цвет radio



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

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

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

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

Отмечу важную вещь, что обязательно должен быть атрибут 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.

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

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

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

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

Она выглядит вот так:

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

    Стилизуем чекбоксы и радиокнопки с CSS3

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

    Существует 2 типа элементов форм, которые очень трудно стилизовать под себя (особенно задать один стиль для всех платформ) — Windows, OS X, Linux по-своему отображают данные элементы.

    HTML код

    начнём мы с создания html документа со следующей структурой:

    Радио кнопки

    Чекбоксы

    С html структурой мы закончили. Теперь давайте посмотрим, каким образом мы можем стилизовать элементы . Первым делом возьмёмся за радио элементы. Отображение позаимствуем с дизайна OS:

    Стилизуем радиокнопки

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

    Затем спрячем радио кнопку по её атрибуту:

    Заменяем скрытый элемент псевдо классом :before.

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

    На данном этапе наши элементы должны выглядеть вот так:

    Теперь нам нужно добавить мелкие кружочки в основной круг при клике по кнопке. Для этого воспользуемся псевдо-элементом CSS3 :checked, и в качестве контента запишем HTML символ круга • •, но для того чтобы всё отображалось так, как нам нужно, данное значение нужно преобразовать для CSS. Для этого можем воспользоваться сервисом Entity Conversion Tool

    Теперь когда мы нажмём на радио кнопку, в основном сером круге должен появиться маленький белый кружок.

    Читайте также:  Какие цвета сочетаются с бордовым для свадьбы

    Стилизуем чекбоксы

    Теперь давайте займёмся оформление чекбоксов. Для начала снова спрячем элемент:

    Поскольку мы убираем стандартное отображение чекбокса при помощи псевдо-элемента :before, просто добавим рамку:

    Затем добавим символ “галочка”, который появится при клике по чекбоксу. Сделаем это по аналогии с радиокругом. На этот раз нам понадобится преобразовать HTML символ ? ✓.

    В итоге, вот что у нас должно получиться:

    Итоги

    В этом уроке мы рассмотрели способ, который вы можете использовать для нужного вам отображения радио кнопок и чекбоксов. Поскольку мы использовали CSS3, то данная техника будет работать только в браузерах, которые поддерживают эту технологию. Для того чтобы добиться подобных результатов в более старых браузерах, можете воспользоваться соответствующим jQuery плагином.

    Данный урок подготовлен для вас командой сайта ruseller.com
    Источник урока: http://www.hongkiat.com/blog/css3-checkbox-radio/
    Перевел: Станислав Протасевич
    Урок создан: 8 Марта 2013
    Просмотров: 193624
    Правила перепечатки

    5 последних уроков рубрики «CSS»

    Забавные эффекты для букв

    Небольшой эффект с интерактивной анимацией букв.

    Реализация забавных подсказок

    Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

    Анимированные буквы

    Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

    Солнцезащитные очки от первого лица

    Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

    Раскрывающаяся навигация

    Экспериментальный скрипт раскрывающейся навигации.

    Источник

    Делаем красивые кнопки выбора (стилизация radio input)

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

    Не могу не отметить, что делать стандартные Radio-кнопки или, тем более, выпадающие списки для выбора из 2-4 вариантов не очень удобно и красиво. Поэтому я решил показать вам как можно сделать подобные кнопки выбора значительно удобнее.

    Разметка

    Нам понадобится всего несколько дополнительных элементов: при написании разметки формы, вам потребуется обернуть каждую пару input + label в блочный элемент, в моём случае это div с классом form-item и так же поступить с этими div’ами, у меня это контейнер с классом radio-container . Вы наверняка уже сталкивались ранее с подобным подходом, если использовали Boostrap Framework.

    Я набросал макет для 2, 3 и 4 кнопок выбора (не рекомендую использовать данный подход для большего количества элементов, в таком случае лучше воспользоваться выпадающим списком):

    Стили

    Для начала нам необходимо будет скрыть сами элементы выбора, я сделал это просто, при помощи свойства display: none . Теперь пользователю отображаются только элементы label , если вы не допустили ошибок в разметке, то по нажатию на них, элементы выбора должны активироваться, вы можете проверить это при помощи инструментов разработчика в вашем браузере.

    Далее выравниваем label по горизонтали, вы можете сделать это несколькими способами:

    • При помощи свойства float: left; , применённого к элементам label . Я не рекомендую данный подход, так как он в некоторых ситуациях, может сломать вёрстку, и, кроме того, вам придётся использовать хак в виде дополнительного элемента clearfix.
    • Использовать свойство display: inline-block; , для элементов label . Данный подход я использовал ранее, до того как практически во всех браузерах появилась поддержка flexbox.
    • Для родительского контейнера (в моём случае это radio-container ) воспользоваться свойством display: flex;

    Я использую третий вариант, flexbox поддерживаться практически во всех браузерах, если вы хотите поддерживать IE, этот подход вам не подойдёт.

    Далее нам осталось лишь показать пользователю какой элемент активен на данный момент, сделать это очень просто, но есть один нюанс: ваш элемент input должен следовать перед элементом label , иначе css свойство, приведённое ниже, работать не будет.

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

    Эта запись означает, что вложенные стили будут применяться только к элементу label и только в том случае, если элемент radio , к которому относится label , активен в данный момент.

    Читайте также:  Каким цветом должно быть платье у подружки невесты

    Как видно из записи, активный элемент будет другого цвета и текст будет белым, в моём примере этого достаточно.

    Результат

    Я добавил ещё немного стилей для более красивого отображения элементов выбора, вот какой результат у меня получился:

    Можно немного изменить стили и получить такой результат:

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

    Данный приём очень хорошо работает когда у вас есть всего 2-4 варианта выбора, на пример гендерная принадлежность пользователя, выбор из вариантов «Да», «Нет», период оповещения (ежедневно, еженедельно, ежемесячно) и так далее. При больше количестве элементов советую воспользоваться выпадающим списком, это будет и удобнее для пользователя и красивее выглядеть на вашем сайте.

    Источник

    Стилизация чекбоксов и радиокнопок на чистом CSS с совместимостью для старых браузеров

    Для того, чтобы оформить чекбоксы и радиокнопки, как того требует дизайн, сегодня не обязательно использовать JavaScript-решения (типа моего плагина jQuery Form Styler), т.к. для этого можно задействовать только CSS, причем с обратной совместимостью для старых браузеров (т.е. не в ущерб юзабилити), которые не поддерживают современные CSS-правила.

    Другими словами – в современных браузерах чекбоксы и радиокнопки будут выглядеть красиво, в соответствии с задуманным дизайном, а в старых (это относится к Internet Explorer версии 8 и ниже) они останутся с оформлением “по умолчанию”, характерным для каждой конкретной операционной системы.

    Кроме того, сохраняется возможность HTML5-валидации стилизуемых элементов (чего может не быть при использовании JavaScript-плагинов). В современных браузерах ее поддержка – уже давно норма.

    Важные особенности

    Чтобы всё получилось, важно учитывать следующее:

    1. Кроме, собственно, самого тега элемента, который мы хотим красиво оформить ( или ), понадобится тег , благодаря которому переключать элемент можно, кликая на текст, а не только на сам элемент.
    2. Тег должен находиться до тега (в этом случае состояние элемента формы переключается с помощью атрибута for ), либо он должен находиться внутри тега (в этом случае атрибут for не нужен, но понадобится тег-обертка для текста).

    “Фокус” заключается в использовании псевдоселекторов :checked и :not . При этом сам чекбокс или радиокнопка делаются невидимыми, а их эмуляция осуществляется с помощью псевдоэлементов :before и :after для тега или вышеупомянутого тега-обертки.

    Стилизация для современных браузеров

    Рассмотрим оба вариант расположения стилизуемого элемента формы. Какой из них наиболее удобен – решать вам. Суть от этого не меняется.

    Теги чекбокса и радиокнопки находятся перед тегом

    В HTML-коде это выглядит следующим образом:

    Еще раз хочу заострить ваше внимание – тег обязательно должен быть расположен перед тегом . Если вы поменяете их местами, ничего работать не будет.

    CSS-код для чекбокса будет таким:

    CSS-код для радиокнопки будет таким:

    С помощью свойств position , z-index и opacity для классов .checkbox и .radio мы визуально прячем оригинальные элементы, при этом они остаются на том же самом месте, где будут стилизованные элементы. А с помощью margin немного смещаем их, чтобы сообщение валидации HTML5 смотрелось гармонично. В зависимости от дизайна чекбокса и радиокнопки этот отступ можно подогнать.

    Теги чекбокса и радиокнопки находятся внутри тега

    HTML-код в данном случае будет следующим:

    По аналогии с предыдущим вариантом – тег обязательно должен быть расположен перед тегами с классом .checkbox__text и .radio__text .

    CSS-код для чекбокса будет таким:

    CSS-код для радиокнопки будет таким:

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

    Стилизация с учетом старых браузеров

    CSS-код для чекбокса. В комментариях к коду я добавил пояснения касательно браузеров:

    CSS-код для радиокнопки:

    Примеры

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

    Источник

    Изменение радио кнопок с помощью CSS

    Доброго времени суток. 🙂

    Сегодня хочу предложить вам еще один интересный материал, который поможет вам сделать сайт заказчика или свой немножечко красивее. В этой статье речь пойдет о том как изменить radio кнопку и придать ей совершенно новый, более современный вид. Это статья в продолжение прошлой, в которой я рассказал — Как изменить чекбокс с помощью CSS.

    Читайте также:  Как собрать кубик рубик полностью все цвета

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

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

    Обычно, radio кнопки идут по несколько штук сразу. С помощью них вы делаете выбор внутри формы перед отправкой. В примерах я тоже буду размещать по две кнопки. Если вам нужно больше или меньше, то без проблем добавляйте или удаляйте соблюдая некоторые правила о которых я напишу ниже.

    К примеру, у нас будет две обычные кнопки, которые будут иметь вот такой код.

    К каждой кнопке мы с вами добавили метку с помощью label. Если в старых можно обойтись без них, то в новых они понадобятся в любом случаи. Без них нельзя. В отличии от обычных radio кнопок, у новых так же должен быть указан класс. В итоге получится так:

    Как видите, добавлен класс myradio. Именно этому классу и будут присвоены новые стили CSS. Так же не забудьте про другие стандартные параметры радиокнопок, которые нужно добавлять всем кнопкам.

    • id — кнопкам добавляются айди, для того, чтобы было можно подвязать к ним метки label.
    • name — имя кнопки. Его можно указывать одинаковым для нескольких радио кнопок, тогда будет возможность переключения между кнопками в форме. Если имена будут разными, то после активации такой кнопки, снять выделение с нее не получится.
    • for у метки label — должен соответствовать id нужной кнопки. Важным является момент, что label должен располагаться сразу после радио кнопки.

    Закончив с HTML разметкой кнопок, вы можете приступить к их внешним изменениям. Как и писал ранее, все стили мы добавим нашему классу — myradio. Для этого в свой файл стилей, вы должны добавить вот такой кусок кода.

    Если вы давно работаете с CSS, то на этом все и больше никаких шагов не будет. Можете смотреть результат и править стили под себя. Если же вам код не понятен, но вы хотите как то его разобрать, то попробую объяснить, что за что отвечает. Каждый параметр не буду расписывать, для этого существуют учебники по CSS, лишь объясню основы.

    Немного ровняем кнопку для старых версий Internet Explorer.

    Делаем наш label кликабельным. При наведении на него будет появляться рука вместо стрелки.

    С этого места начинается модернизация кнопок. Первым делом, делаем нашу стандартную кнопку невидимой.

    Задаем позиционирование новой кнопке относительно нашего label

    Настройка вида для неактивной кнопки, когда в центре нет точки.

    Это внешний вид той точки/кружка, что появляется в центре при нажатии на кнопку.

    Прозрачность кружка/точки при активации. Как видно в предыдущем пункте был параметр — opacity: 0;

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

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

    На этом все, спасибо за внимание. 🙂

    Если Вам был полезным мой труд, можете финансово поддержать сайт или отключить блокировщик рекламы, что займет 2 минуты 🙂

    Источник