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

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

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

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

Разметка

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

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

<form> <div> <div> <input type=»radio» name=»option1″ checked> <label for=»radio1″>radio1</label> </div> <div> <input type=»radio» name=»option1″> <label for=»radio2″>radio2</label> </div> </div> </form> <br> <form> <div> <div> <input type=»radio» name=»option2″ checked> <label for=»radio3″>radio3</label> </div> <div> <input type=»radio» name=»option2″> <label for=»radio4″>radio4</label> </div> <div> <input type=»radio» name=»option2″> <label for=»radio5″>radio5</label> </div> </div> </form> <br> <form> <div> <div> <input type=»radio» name=»option3″ checked> <label for=»radio6″>radio6</label> </div> <div> <input type=»radio» name=»option3″> <label for=»radio7″>radio7</label> </div> <div> <input type=»radio» name=»option3″> <label for=»radio8″>radio8</label> </div> <div> <input type=»radio» name=»option3″> <label for=»radio9″>radio9</label> </div> </div> </form>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54

<form>   <div>       <div>       <input type=»radio» name=»option1″ checked>       <label for=»radio1″>radio1</label>     </div>       <div>       <input type=»radio» name=»option1″>       <label for=»radio2″>radio2</label>     </div>   </div> </form>   <br>   <form>   <div>     <div>       <input type=»radio» name=»option2″ checked>       <label for=»radio3″>radio3</label>     </div>       <div>       <input type=»radio» name=»option2″>       <label for=»radio4″>radio4</label>     </div>       <div>       <input type=»radio» name=»option2″>       <label for=»radio5″>radio5</label>     </div>   </div> </form>   <br>   <form>   <div>     <div>       <input type=»radio» name=»option3″ checked>       <label for=»radio6″>radio6</label>     </div>       <div>       <input type=»radio» name=»option3″>       <label for=»radio7″>radio7</label>     </div>     <div>       <input type=»radio» name=»option3″>       <label for=»radio8″>radio8</label>     </div>     <div>       <input type=»radio» name=»option3″>       <label for=»radio9″>radio9</label>     </div>   </div> </form>

Стили

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

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

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

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

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

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

.radio-container .radio-btn input:checked + label{ background-color: #0082fe; color: #fff; }

.radio-container .radio-btn input:checked + label{   background-color: #0082fe;   color: #fff; }

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

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

Результат

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

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

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

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

comments powered by HyperComments

Стилизация элементов checkbox и radio button на CSS3 | XoZblog

Здравствуйте, уважаемые читатели XoZbloga! Часто ли Вы создаете различные формы, опросы на своих сайтах? Если да, то наверняка Вам хотелось изменить стандартные элементы. В этой статье покажу как можно легко и просто заменить стандартные элементы checkbox (флажки) и radio button (переключатели) на свои. Использовать будем средства только CSS3!

То что получилось посмотрите и опробуйте на демо-странице или скачайте исходники:

Просмотр демо страницы и скачивание исходников не доступно

Уважаемый читатель, XoZblog существует и развивается за счёт доходов от ненавязчивой рекламы. Если не затруднит, добавьте этот сайт в исключение AdBlock. Спасибо за понимание!

HTML разметка

Расположим элементы на странице:

1 2 3 4 5 6 7 8

<!— Элемент флажок —> <input type=»checkbox» name=»cc» /> <label for=»c1″><span></span>Check Box 1</label> … <!— Элемент переключатель —> <input type=»radio» name=»rr» /> <label for=»r1″><span></span>Radio Button 1</label> …

Здесь ничего особенного, каждому элементу задаем id и name, также используем label для описания элементов «переключателя» и «флажка». Внутрь тега label, вставляем span. Для чего именно, написано ниже.

Правила CSS

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

1 2 3

input[type=»checkbox»] {     display:none; }

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

1 2 3 4 5 6 7 8 9

input[type=»checkbox»] + label span {     display:inline-block;     width:19px;     height:19px;     margin:-1px 4px 0 0;     vertical-align:middle;     background:url(check_radio_sheet.png) left top no-repeat;     cursor:pointer; }

С помощью CSS селектора выбираем все span внутри тега label, которые принадлежат элементам input с типом checkbox (т.е. выбираем все «флажки»). И используем вот такой спрайт (одно общее изображение, вместо множества):

Для выбранных span задаем высоту и ширину в 19px, и располагаем фоновое изображение.

Осталось только организовать правило для активного «флажка» (псевдо-селектор :checked). Для этого просто смещаем данное изображение влево на 19px:

1 2 3

input[type=»checkbox»]:checked + label span {     background:url(check_radio_sheet.png) -19px top no-repeat; }

Вот таким не хитрым способом, с применением нескольких тактик можно организовать на сайте, элементы на свой вкус. Для «переключателей» правила выстраиваются подобным образом, только соответственно фоновое изображение смещается еще на 19px и немного изменятся css селектор, вместо type=»checkbox» используется type=»radio».

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!

Стилизация input radio и checbox кнопок (на чистом CSS) – Di-Grand

Сегодня хочу поделится с вами несколькими вариантами стилизации input type=»radio» а так же input type=»checkbox» . Ни для кого не секрет, что без стилизации этих элементов не бывает жизни у верстальщиков. На своей практике я почти в каждом проекте встречаю кастомную стилизацию radio и checbox.

В интернете есть масса способов их стилизации, но большинство из них либо устарели, либо используют скрпты. Что в свою очередь увеличивает вес страницы. Это для SEO не есть хорошо. И так, давайте начнем, ниже я буду показывать вам готовые примеры стилизации input radio и checbox (на чистом css)

1. Стилизация radio кнопок

Данный способ подойдет тем, кому надо оформить radio в виде кнопок, без флажков и т.д.

Пример стилизации radio в виде кнопок, без флажков в реальном интернет магазине

---

See the Pen Стилизация radio кнопок by Tom Johnson (@OwlThemes) on CodePen.

2. Стилизация checkbox флажков

Оформляем ваши checkbox флажки. Данный способ стилизирует сами флажки, думаю проблем разобраться у вас не будет. Для самого флажка checkbox используется svg картинка, для качественного отображения на retina экранах. Пример с рабочего сайта:

See the Pen Стилизация checkbox by Tom Johnson (@OwlThemes) on CodePen.

3. Стилизация radio флажков

И последний вариант, это оформление radio флажков.

See the Pen Стилизация radio флажков by Tom Johnson (@OwlThemes) on CodePen.

css3 — CSS кастомизация Radio

Stack Overflow на русском

Loading…

2. 0
3. +0
• Тур Начните с этой страницы, чтобы быстро ознакомиться с сайтом
• Справка Подробные ответы на любые возможные вопросы
• Мета Обсудить принципы работы и политику сайта
• О нас Узнать больше о компании Stack Overflow
• Бизнес Узнать больше о поиске разработчиков или рекламе на сайте
6. Войти

Стилизация input с примерами — Сверхновая DIGITAL-маркетинг

Одним из главных элементов на странице являются формы и их оформление довольно тонкий момент при создании сайта. Одни из основных тегов формы — input, label, button, textarea и select.

• input нужен для текстовых полей, радио кнопок, флажков, а так же для кнопок — reset, file, password и других
• textarea — текстовая область, в которую можно ввести текст в несколько строк
• select — это список с возможностью выбора одного значения, либо нескольких. Он может быть как выпадающим, так и статичным
• label — устанавливает связь между элементами формы
• button — отправка данных формы. От input type=submit отличается тем, что имеет более расширенные возможности при создании кнопки

В данной статье мы рассмотрим: как стилизовать форму и все ее элементы при помощи CSS и jQuery. Приступим.

Создадим с вами обыкновенную форму:

input

Вот так он выглядит в HTML

Что бы оформить обычный input jQuery не нужен. Важно запомнить, бразуеры плохо обрабатывают высоту у input, поэтому при ее стилизации стоит отталкиваться от размера вашего шрифта, который используется на странице и для красоты добавим padding(отступ)

Стилизация textarea

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

стандартно textarea имеет следующие параметры:

• правый нижний угол области текста, можно растянуть мышкой по экрану
• для IE имеется постоянный scroll (прокрутка)

устраним эти пустяки, для этого пропишем следующее:

Готово. Наше поле с текстом стало более красивым. Но мы с вами идем дальше и переходим к radio.

Стилизация input radio

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

Бытует мнение что input не поддается стилизации в CSS, развеем этот миф.

• Создадим label для того что бы при нажатии на название и «псевдокнопку» сработал radio input.
• Внутри label создаем input и задаем ему type=radio.
• После input добавляем пустой div и текст для input.

В CSS будем использовать checked, before, а так же + для обращения к соседним селекторам.

В итоге мы получаем вот такой результат

Стилизация input checkbox

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

Для стилизации checkbox будем использовать такие же манипуляции, как и с radio

Отличается CSS checkbox от radio только отсутствием border-radius

В итоге мы получаем вот такой результат

Стилизация select

Обычно, select описывается в HTML документе так:

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

Приступим. Разметка HTML:

Стилизуем всё это добро

собственно сам код скрипта для нашего селекта

Выглядеть будет это так:

Стилизация Input file

type=file отображает на странице кнопку, с помощью которой можно выбрать файл. И блок в котором мы видим сам выбранный файл. Давайте рассмотрим стилизацию input file.

Создаем разметку следующего характера

Здесь я воспользовался небольшим хаком) обычный input делаем невидимым с помощью opacity. И задаем шрифт большого размера, наша кнопка станет большой и закроет весь container.

Под input который выводит загрузочный popup, расположим input. Он будет выводить название файла, который загружаем на сервер и кнопку выбора файла.

Добавим немного script’a. Он будет показывать название нашего файла, который прикрепили, добавим hover для кнопки когда input получает фокус:

В итоге мы получаем:

Стилизация input reset

Иногда требуется сброс для формы.
Создаем разметку.

Накинем стилей

Для чего jQuery?

Например, мы отправили форму и автоматически заполнили ее опять через PHP. Нажимая на стандартную кнопку reset у нас, она не сработает. А если использовать скрипт, то форма успешно очистится

Стилизация input submit

Стилизация button

Благодаря атрибуту type=submit, он сообщает о том что при нажатии на button данные формы передадутся на сервер.

В HTML он добавляется так

Поднакинем стиля

В итоге мы получаем: