Переключатель в форме HTML radio


Оглавление (нажмите, чтобы открыть):

Стилизация radio на CSS

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

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

HTML код

Атрибут for у тега label устанавливает связь с input через id, в том случае если, input не вложен в label. Значения у for и id, должны быть одинаковыми. В нашем примере, у первой связки – honda, а у второй renault. Когда пользователь должен выбрать только один вариант, следует прописать обоим инпутам, атрибут name с одинаковым значением (car). Атрибут type указывает, что инпут надо отобразить, как radio кнопку (круглым).

Обернем первую связку input+label в div с классом radio, то же самое сделаем для второй связки. Присвоим так же классы input и label, для их дальнейшей стилизации.

По умолчанию, браузер отобразит любой элемент формы. На картинке ниже, вы можете увидеть наши radio, без CSS стилей.

Скажем спасибо браузеру и погрузимся в CSS код для стилизации radio кнопок.

CSS-код

Вложенные теги input+label, позиционируем относительно родителя – div с классом radio.

.radio <
position: relative;
margin-bottom: 1rem;
>

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

.radio_input <
-webkit-appearance: none;/* Chrome */
-moz-appearance: none;/* Firefox */
appearance: none;/* убираем стандартные кружочки */
position: absolute;
>

Стилизуем текст внутри тега label.

.radio_label <
padding-left: 25px;/* отступ слева */
font-size: 1rem;
color: #444;
cursor: pointer; /* курсор рука */
>

Создадим два состояния radio кнопок, с помощью псевдоэлементов before+after. Стилизуем before, как пустой белый кружок, after – кружок с цветным фоном, изображающий отмеченное состояние. На деле, круг с меньшим диаметром after, будет находиться внутри круга с большим диаметром before.

Стилизуем псевдоэлемент before

.radio_label:before <
content: «»;
display: block; /* не в строку */
width: 16px; /* ширина блока */
height: 16px;/* высота блока */
border: 1px solid #ccc;/* рамка */
background-color: #fff; /* цвет фона */
border-radius: 50%;/* получаем круг */
position: absolute;/* расположен точно в родителе */
top: 0; /* расстояние от верха родителя */
left: 0;/* расстояние слева от родителя */
z-index: 1; /* на нижнем слое */
transition: border .1s linear;/* плавный переход для border */
>

Стилизуем псевдоэлемент after

.radio_label:after <
content: «»;
display: block;
width: 12px;
height: 12px;
background-color: #49d120;
border-radius: 50%;
opacity: 0; /* полностью прозрачный */
position: absolute;
top: 3px;
left: 3px;
z-index: 2;/* на верхнем слое */
transition: opacity .1s linear; /* плавный переход для opacity */
>

Нам, нужно менять вид кружка, только при отмеченном состоянии (checked). Когда пользователь кликает в поле input, рамка у before меняет свой цвет.

.radio_input:checked + .radio_label:before <
border-color: #319612;
>

А у after, прозрачный фон, становится непрозрачным, кружок окрашивается в зеленый цвет.

.radio_input:checked + .radio_label:after <
opacity: 1;
>

Таким образом, в неотмеченном состоянии, поле input – белое. А в отмеченном состоянии – зелёное. Мы получили стилизованные radio кнопки на чистом CSS.

Радиокнопки и чекбоксы в HTML, их теги и атрибуты

Здравствуйте, уважаемые читатели сайта Uspei.com. Следующий элемент, который сегодня мы успеем разобрать радиокнопки и чекбоксы в html. Обычно они используются в целях задания вопроса внутри формы (о создании форм мы говорили тут) и, соответственно, через них мы можем предложить человеку варианты ответа. При этом он может выбрать только один из этих вариантов.

Радиокнопки — тип radio

Давайте приступим к реализации радиокнопок. Перейдем в код и для радиокнопок выделим отдельный абзац. В нем и создадим нашу радиокнопку. Кнопка создается при помощи тега input.

Тип укажем radio. Зададим кнопке имя и укажем значение, т.е. какое значение будет отослано обработчику, если эта кнопка будет активна. Для этой кнопке мы укажем значение «yes», т.к. эта кнопка будет отвечать за положительный ответ.

Давайте добавим метку label c ответом «Да» для того, чтобы человек кликнул по метке, и кнопка активировалась автоматически.

Теперь создадим ей противоположную кнопку с ответом «Нет». Для этого скопируем label и вставим после первого label. Поменяем «Да» на «Нет» и меняем значение «yes» на «no». Обратите внимание, что имя мы должны оставить то же самое. Это скажет браузеру о том, что эти радиокнопки принадлежат к единой группе и что они взаимоисключающие друг друга. То есть, если активировать одну кнопку, то другая деактивируется. Если имена кнопкам дать разные, то можно одновременно активировать обе кнопки.

Вот таким образом можно передавать обработчику значение = выбор того или иного ответа.

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

И еще один момент, который может вам пригодиться – это автоматическая активация кнопок изначально. Для этого есть специальный атрибут, который можно добавить к нужной кнопке. Эта кнопка будет активирована изначально. Атрибут называется checked — можно перевести как отмеченный. Этому атрибуту не нужно указывать никакого значения.

А вот и конечный результат.

Чекбоксы — тип checkbox

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

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

Теперь таким же образом создадим еще два чекбокса: хронометраж и свои наработки.

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

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

До встречи! Успевайте всё и всегда на страницах блога Uspei.com

Помоги проекту — подпишись на наш Яндекс.Дзен канал!

Стилизация флажков и переключателей с использованием CSS3

При создании CSS стилей для HTML форм, разработчики часто сталкиваются с невозможностью непосредственно менять внешний вид элементов флажков (checkboxes) и переключателей (radio buttons). Рассмотрим как можно обойти это ограничение при помощи инструментария CSS3 и без использования какого-либо кода JavaScript.

Итак, для начала добавим несколько обычных флажков и переключателей на форму:

Перенесем стандартное отображение элементов за область видимости и добавим отступы к соседствующим меткам:

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

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

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

Обратите внимание, что селекторы :before и :after позволяют добавлять содержание непосредственно до и после содержимого самой метки. Так как для меток мы задали относительное позиционирование (position: relative), то можем задавать контекстное абсолютное позиционирование для их содержимого.

Осталось скрыть индикаторы выбора, когда элемент не выбран, и, соответственно, отображать их, когда элемент находится в выбранном состоянии:

Добавим, что описанное здесь решение работает во всех современных версиях браузеров Chrome, Firefox, Safari, Opera, а также, начиная с версии 9, и в Internet Explorer.

Полностью CSS определения можно загрузить здесь.

Данная статья не подлежит комментированию, поскольку её автор ещё не является полноправным участником сообщества. Вы сможете связаться с автором только после того, как он получит приглашение от кого-либо из участников сообщества. До этого момента его username будет скрыт псевдонимом.

66 Radio Buttons CSS

C ollection of HTML and CSS custom radio buttons. Update of May 2020 collection. 10 new items.

Related Articles

Author

  • Mikael Ainalem
  • January 15, 2020

Links

Made with

About the code

Underground Radio Buttons

The radio button highlight travels underground.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Benjamin Koehler
  • October 18, 2020

Links

Made with

  • HTML / CSS (SCSS)

About the code

Mobile Radio Buttons with Small Animation

Mobile radio buttons as real buttons, simple look and feel with a small animation. Easy to use and to handle.


Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Jase
  • August 23, 2020

Links

Made with

  • HTML / CSS (SCSS)

About the code

Fancy Checkboxes and Radio Buttons

Fancy checkboxes and radio buttons with Font Awesome.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

  • Dronca Raul
  • August 6, 2020

Links

Made with

About the code

Radio Buttons Interaction

Radio buttons interaction with HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Aaron Iker
  • July 9, 2020

Links

Made with

  • HTML / CSS (SCSS)

About the code

Radio Input

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Andreas Storm
  • June 13, 2020

Links

Made with

  • HTML / CSS (Stylus)

About the code

Checkbox & Radio Buttons

macOS Mojave dark mode checkbox & radio buttons.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Rplus
  • May 27, 2020

Links

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Alignment Radio Buttons

CSS tricks: use flex-grow for transition.

Мастер Йода рекомендует:  Пишем Space Invaders при помощи Corona. Реализация геймплея. Часть 1

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Andreas Storm
  • May 25, 2020

Links

Made with

  • HTML / CSS (Stylus)

About the code

Material Design Radio Buttons

Pure CSS Material Design radio buttons.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari


Author

  • Tamino Martinius
  • May 18, 2020

Links

Made with

  • HTML / CSS / JavaScript

About the code

Wobble Radio Buttons

UI snippet for radio buttons in HTML, CSS and JS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Darin
  • April 30, 2020

Links

Made with

  • HTML
  • CSS/SCSS

About the code

Responsive Toggle Switch

A toggle switch to use in your forms (using radio inputs as the core) that is responsive. Styled with CSS, using flexbox for sizing.

Author

  • Cameron Fitzwilliam
  • January 15, 2020

Links

Made with

  • HTML
  • CSS/SCSS

About the code

Smile Toggle (HTML + CSS)

Radio button with CSS by using the :checked

Author

  • Nikki Pantony
  • January 6, 2020

Links

Made with

About the code

Pure CSS-SVG Radio Selector Buttons

Example built using just CSS and SVG’s, no JS needed. Inspired by Google Material Design.

Author

  • Yariv Fruend
  • January 6, 2020

Links

Made with

  • HTML
  • CSS
  • JavaScript

About the code

Slap Toggle

CSS slap toggle.

Author

  • Andreas Storm
  • November 21, 2020

Links

Made with

  • HTML
  • CSS/Sass

About the code

Input Radio

Simple input radio style.


Author

  • Shaw
  • November 9, 2020

Links

Made with

  • HTML / CSS (Less)

About the code

☑️ Transform Toggles, will-change ☑️

A transform-only version of Flexbox Toggles to compare performance and code. This takes it a little further with will-change for buttery-smooth animation without repaints.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Buddy Reno
  • September 12, 2020

Links

Made with

  • HTML
  • CSS/SCSS

About the code

Material Inspired Radio Groups

HTML and CSS radio groups.

Author

  • Andrey Vereshchak
  • 03.08.2020

Links

Made with

  • HTML
  • CSS/SCSS
  • JavaScript (jQuery.js, bootstrap.js, slick.js)

About the code

Toggle Radio Intput

Toggle radio intput with the label.

Author

  • Tobias Bogliolo
  • 07.07.2020

Links

Made with

  • HTML
  • CSS
  • JavaScript (jQuery.js)

About the code

Custom Radio Buttons Survey

Custom radio buttons survey with jQuery.

Author

  • Alexander Repeta
  • 30.06.2020

Links

Made with

  • HTML
  • CSS/SCSS

About the code

Styling Radio Buttons

Pure CSS styling radio buttons.

Author

  • Ryan LaBar
  • 06.06.2020

Links

Made with

  • HTML

  • CSS/SCSS
  • JavaScript (jQuery.js, TweenMax.js)
  • SVG

About the code

Liquid Radio Button

Liquid radio button using SVG and GSAP (GreenSock).

Author

  • Tamino Martinius
  • 02.06.2020

Links

Made with

About the code

Liquid Radio Button

Liquid radio button with SVG.

Author

  • Dronca Raul
  • 24.03.2020

Links

Made with

  • HTML
  • CSS/SCSS

About the code

Custom Radio Buttons

HTML and CSS custom radio buttons.

Author

  • LukasOe
  • 13.02.2020

Links

Made with

  • HTML/Haml
  • CSS/Sass

About the code

Radio Button Circuit

Radio button circuit with HTMl and CSS.

Demo Image: Jelly Radio Button

Jelly Radio Button

Sticky radio button. Enjoy this flat and simple styling of radio button in only vanilla CSS 🙂
Made by Tommaso Poletti
February 9, 2020

Demo Image: Hidden Radio Messages/Tooltips

Hidden Radio Messages/Tooltips

Hidden radio messages/tooltips in HTML and CSS.
Made by Joshua Ward
January 6, 2020

Demo Image: Ripple Animation On Input Type Radio And Checkbox

Ripple Animation On Input Type Radio And Checkbox

HTML and CSS ripple animation on input type radio and checkbox.
Made by WILDER TAYPE
December 27, 2020

Demo Image: CSS Radio Buttons

CSS Radio Buttons

A simple and elegant CSS radio button.
Made by Tristan White
December 13, 2020

Demo Image: Radio Group Using Labels

Radio Group Using Labels

Radio group using labels with HTML and CSS.
Made by Sam Keddy
December 5, 2020

Demo Image: Radio Button Big Square

Radio Button Big Square

Pure CSS radio button big square.
Made by Gabriel Ferreira
November 12, 2020

Demo Image: Animated Checkbox And Radio Buttons

Animated Checkbox And Radio Buttons

Animated CSS-only checkbox and radio switches.
Made by Kolja Kutschera
October 12, 2020

Demo Image: Radio Selects

Radio Selects

Radio selects: flexbox and fun.
Made by Adam Clark
August 17, 2020

Demo Image: Checkout Form

Checkout Form

A checkout form using styled radio buttons.
Made by Rosa
July 16, 2020

Demo Image: SVG Splat Radio Buttons

SVG Splat Radio Buttons

HTML, CSS and SVG splat radio buttons.
Made by Chris Gannon
June 18, 2020

Demo Image: Radio Buttons

Radio Buttons

Open different windows by clicking a radio buttons.
Made by Saumitra Bose
June 1, 2020

Demo Image: CSS Only Input Radio Select Concept

CSS Only Input Radio Select Concept

Testing out some input radio selecting concept with an animated slide to whow which one is selected.
Made by web-tiki
May 9, 2020


Demo Image: Input & Radio-Button

Input & Radio-Button

Pure CSS input & radio-button.
Made by Ophelia Fournier-Laflamme
April 27, 2020

Demo Image: Very Simple Radio Buttons

Very Simple Radio Buttons

HTML and CSS just very simple radio buttons.
Made by Pamela Dayne
April 17, 2020

Demo Image: Pure CSS Fancy Checkbox/Radio

Pure CSS Fancy Checkbox/Radio

A Fancy Checkbox/Radio buttons with small transition, enjoy it!
Made by RaГєl Barrera
April 11, 2020

Demo Image: Google Dots Radio Buttons

Google Dots Radio Buttons

4 different ways to easily customize radio buttons.
Made by Victor Freire
March 5, 2020

Demo Image: Animated Switch For Radio Buttons

Animated Switch For Radio Buttons

CSS only animated switch build with radio buttons.
Made by Fredrik Jensen
January 23, 2020

Demo Image: Material Radio Button

Material Radio Button

Material radio button with HTML, CSS and JavaScript.
Made by CODEARMADA
January 14, 2020

Demo Image: Google Maps Radio Buttons CSS Only

Google Maps Radio Buttons CSS Only

Radio buttons that are styled as actual buttons. CSS only.
Made by Elias Meire
December 7, 2015

Demo Image: Simple Toggle

Simple Toggle

Simple toggle button.
Made by Dominic Magnifico
September 28, 2015

Demo Image: Radio Button CSS

Radio Button CSS

A simple input radio style. Sass is the way!
Made by Lorenzo D’Ianni
September 25, 2015

Demo Image: Fancy Radio Button

Fancy Radio Button

Fancy radio button that looks like a checkbox.
Made by Stacy
September 17, 2015

Demo Image: Custom CSS3 Radio Button

Custom CSS3 Radio Button

Custom HTML and CSS radio button.
Made by sodapop
September 4, 2015

Demo Image: CSS Ripple/Wave Checkbox And Radio Button

CSS Ripple/Wave Checkbox And Radio Button

Animate the checking and the unchecking, using SASS and Bourbon.
Made by Matt Sisto
August 21, 2015

Demo Image: Radio Button Input Scale

Radio Button Input Scale

Radio buttons reimagined. This is based on the common survey answers of “never, sometimes, often, usually, always.”
Made by Caleb Duren
August 2, 2015

Demo Image: Stylish Radio Buttons

Stylish Radio Buttons

CSS only stylish radio buttons.
Made by Simon Buisson
July 31, 2015

Demo Image: Radio Button Styling

Radio Button Styling

HTML and CSS radio button styling.
Made by Morten Olsen
June 16, 2015

Demo Image: CSS Styling Radio Button

CSS Styling Radio Button

Tricks giving style to a radio button.
Made by Angela Velasquez
May 26, 2015

Demo Image: Strikethrough Radios

Strikethrough Radios

An experiment in striking through parts of a sentence as a way of interacting with radio inputs…
Made by Ed Hicks
April 23, 2015

Demo Image: Radio Input

Radio Input

Simple radio input using the :checked psuedo class.
Made by HГҐvard Brynjulfsen
April 15, 2015

Demo Image: Flat Radio Button Inputs

Flat Radio Button Inputs

Styled radio buttons that still allows for keyboard input (at least in Chrome).
Made by Kris Hedstrom
April 4, 2015

Demo Image: Radio Control

Radio Control

This pen is used in the SitePoint article — Theming Form Elements with Sass.
Made by SitePoint
March 31, 2015

Demo Image: Radio Buttons

Radio Buttons

No JS, no img, full em, editable text (flexible).
Made by Jonathan Levaillant
January 29, 2015

Demo Image: Flat Radio — Yes/No

Flat Radio — Yes/No

Based off of Nate Wiley’s “Styled Radio Buttons” pen. Similar concept but with a flat design. Play around with color variables ($red, $blue, $green) to adjust the colors of the buttons.
Made by Matthew Blode
October 27, 2014

Demo Image: Awesome Toggle Button

Awesome Toggle Button

Two very nice radio buttons joined together as a toggle switch.
Made by Andrew
October 7, 2014

Demo Image: Radio Checked Style

Radio Checked Style

Checked radio style. Awesome.
Made by Volker Otto
September 30, 2014

Demo Image: 2 Elements 1 Styled Radio

2 Elements 1 Styled Radio

Pure HTML/CSS animated and styled radio buttons with label (no extra elements required).
Made by Tobias HarisonDenby
September 8, 2014

Demo Image: Balloon Radio Buttons

Balloon Radio Buttons

Skinned some radio buttons to give them an elevated effect.
Made by Chris Simari
July 26, 2014

Demo Image: Custom Checkboxes/Radio Buttons

Custom Checkboxes/Radio Buttons

Example of some simple custom checkboxes and radio buttons made with pure CSS. These only work in chrome, but fallback to the native ones in other browsers.
Made by Sam
July 7, 2014


Demo Image: Bouncy Radio Buttons!

Bouncy Radio Buttons!

Radio buttons with HTML and CSS.
Made by Joe Ringenberg
June 19, 2014

Demo Image: Simple Radio Group Using CSS3

Simple Radio Group Using CSS3

Simple radio group using CSS3.
Made by Igor Amado
May 16, 2014

Demo Image: Radio Buttons

Radio Buttons

HTML and CSS radio buttons.
Made by White Wolf Wizard
February 19, 2014

Demo Image: Cool Radio Buttons

Cool Radio Buttons

HTML and CSS radio button.
Made by Eric Rogg
November 20, 2013

Всё о | CSS & HTML & JavaScript

Атрибут checked=»checked»

Делает чекбокс [type=»checkbox»] или радиокнопку [type=»radio»] активной. Активных чекбоксов может быть несколько. В группе с одним name должна быть активной только одна радиокнопка.

Атрибут checked=»checked» можно вызывать с помощью label

Если нажать на содержимое label, то сработает input (будет активным или нет).

описание описание1 описание2

input не обязательно должен располагаться внутри label.

описание описание1 описание2

Атрибут checked=»checked» можно вызывать с помощью нескольких label

Кнопка будет срабатывать вне зависимости от того, на какой label я нажму и вне зависимости от расстояния между тегами label и input.

описание2 описание1 описание11 описание21 описание12 описание22

Псевдокласс :checked

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

Вот несколько вещей, которые можно сделать только на CSS

  1. Tab-меню
  2. Слайдеры, галереи: 1, 2, 3
  3. Accordion
  4. Модальное окно
  5. Спойлер
  6. Пока флажок не установлен, по ссылке пройти нельзя:

Я ознакомлен и принимаю условия договора
ссылка, ну-ка, нажмите на меня

:checked и селекторы в Google Chrome

Красивые чекбоксы-переключатели «ВЫКЛ ВКЛ». Как задать свой стиль checkbox

Я предпочитаю стандартный вид input, но к этому, этому и этому не осталась равнодушна и приложила свою руку к оформлению и стилизации checkbox. Можно убирать саму кнопку и задать свой стиль :before у label.

Проверка чекбокса на включение/отключение

Большинство вещей не решить только CSS. Нужно подключать JavaScript. Иногда нужно так Если группа Или так Или так . alert появляется по нарастающей. Если одна галочка, то одно сообщение, если три галочки, то три сообщения.

Проверить все ли чекбоксы помечены

Установить checked в checkbox

Установить checked в radio

Выделить все checkbox одним нажатием кнопки

Задача:

  1. если отметить все checkbox, то будет отмечен и главный,
  2. если снять checked хотя бы с одного checkbox группы, то будет снят checked и с общего чекбокса,
  3. если будет поставлена/убрана галочка с основного чекбокса, то автоматом будут убраны/установлены все флажки второстепенных checkbox.
Мастер Йода рекомендует:  Простая и ужасающая история про шифрование — об Open Source, доверии и ответственности

Решение я нашла тут. Check all

Ограничить область действия функции JavaScript. Функция исполняется только внутри конкретного тега

Если нужно несколько fieldset, то узнаём его порядковый номер при наведении на него курсора мышки и исполняем функции, если он имеет класс shest1.

Первая форма: Вторая форма:

Но лучше с помощью nextElementSibling, previousElementSibling, parentNode. См. код дерева.

Дерево из checkbox

Задача:

  1. если хотя бы один чекбокс прямого потомка выделен, то родитель помечен :indeterminate,
  2. если все чекбоксы прямого потомка выделены, то родитель помечен галочкой :checked,
  3. родитель отвечает за снятие/установку галочек всех дочерних чекбоксов,
  4. семантический код,
  5. у дерева может быть неограниченное число уровней, но скрипт и CSS при этом не увеличиваются.

Что не удалось:

  1. если кликнуть по 2, а потом снять галку с 2.1.1, то у 2 и 2.1 будет :indeterminate. Всё верно. Но, если затем нажать на 2, то у 2.1 :indeterminate должно поменяться на :checked, а этого не происходит.

Вот до такой удачной реализации (мало кода для столь объёмного элемента) я дошла путём проб и ошибок. Именно поэтому здесь выложено больше, чем нужно. Это варианты, которые я прорабатывала.

Как сделать полноценное дерево из checkbox

Если дерево большое, то вложенные пункты лучше прятать. В стилях предыдущей реализации в комментариях к коду CSS показано как. Минус того метода: нажмёшь 2, а потом убираешь галочки с 2.2, 2.3, 2.4 чтобы осталась галка только на 2.1. Поэтому рядом нужно поставить плюс/минус. Здесь совсем не заметен недостаток, озвученный выше.

  1. плюсик и минус работают только если ни один из потомков не выделен,
  2. если убрать выделение со всех пунктов, то список скроется, у родителя не будет checked,
  3. если поставить флажок на родителя, то будут выделены все потомки, но показаны только дочерние.
  4. если убрать флажок с родителя, то и потомки не будут выделены, кроме того они будут скрыты.
  5. доработав код, можно чтобы при переходе по разным ссылкам, расположенных, скажем, на разных страницах, на страницу дерева с чекбоксами, раскрывалось дерево на нужном уровне, помечались требуемые чебоксы галочками.

Деактивировать все флажки, кроме нескольких отмеченных

Как задать максимально возможное число чекбоксов, на которые можно установить галки? То есть дать выбрать только 3 любых чекбокса из 5 возможных. Свой выбор можно менять.

Я, конечно, понимаю, что запись странновата, только вот .querySelectorAll(‘[type=»checkbox»]:not([checked])’) работает только для изначально установленных флажков.

Как посчитать сумму значений value у выбранных чекбоксов

80 комментариев:

Rusylev как всегда на высоте! Великолепная статья, спасибо. NMitra Спасибо )) Анонимный Спасибо) Анонимный Потрясающе!Отлично все сделано) все четко, и доступно!Спасибо. NMitra Благодарю, приятно слышать ) Анонимный Круто ,всё круто с: ,спасибо Misha B классно, спасибо, очень познавательно
а как сделать так что бы только при отмечании галочкой была возможность перейти на следующую старницу.
пример лицензионное соглашение — только при отмечании была возможность перейти на определённый URL , в если не было отмеченно и попытаться перейти по URL то выскакивало окно как в «Проверка чекбокса на включение/отключение»
зарание спасибо NMitra Хм, это и на CSS можно сделать. Ребёнок заболел. Наверно в понедельник/вторник выложу свой вариант, обновлю эту статью.. Misha B Желаю здоровья вашему ребёнку и вам. не проблема подождём, лижбы у вас было всё в порядке NMitra Спасибо, пошли на поправку, см. http://shpargalkablog.ru/2013/08/checked.html#linkDa Штиф Васлер Вот это статья, просто perfect! Благодарю за очередной урок css магии 😉 Анонимный Здравствуйте. Очень хорошая статья. Есть ли что-то подобное не только про checkbox, но и про radio. Если быть точнее, то возникла проблема — есть таблица, в которой имеется 4 столбца и какое-то бесконечное количество строк. В каждой строке по 4 инпута с типом radio, т.е. пользователь для каждой строки может выбрать только один вариант. Но вот как сделать, чтобы в каждом столбце был как бы общий radio, который выделяет сразу все radio именно в его столбце и при этом сам выделяется. В общем я всё это реализовал, вот только общий radio сам остаётся не выделенным. Осталось совсем маленько, не знаю как добить уже. Помогите, пожалуйста. NMitra Здравствуйте, по мне, так не очень удачная идея. В группе radio хоть один элемент да должен быть активным:

Анонимный Спасибо Анонимный Админ большое спасибо! Очень помогло. NMitra На здоровье! Анонимный Спасибо большое, статья очень помогла Николай Зуев круто слов нет. только вот почему не написано как работать с пхп? NMitra Потому что с PHP я знакома постольку-поскольку. Анонимный Wow/ Автор-молодецц-такая работа- нашел что искал- группа чекбоксов с одной кнопкой. Спасибо Анонимный добрый день помогите решить задачу
нужно сделать окно над которым будут радио баттоны нажимая на которые, один текст сменяется другим в зависимости от нажатого радио баттона. радио баттоны подписаны 1,2,3.
!но при этом нажимая на радиобаттоны менялась и картинка в хедере!
https://yadi.sk/i/-DjMU_yQWPzhN NMitra Добрый день. Я бы делала JavaScript-ом. Не совсем понимаю как вам помочь. Это нужно знать как минимум ваши селекторы. И такая работа, как правило, оплачивается. Извините. Анонимный как заставить чекбоксы работать в гугл хром? NMitra У меня в браузере все примеры выше работают. У вас не так? Анонимный а есть ли возможность по нажатии на чекбокс сдлеть редактируемыми/(не редактируемыми) текстовые поля, находящиеся на этой же странице? NMitra Легко, только input-ы должны иметь одного родителя

Соколов Игорь профессионально, доступно, большая благодарность NMitra Спасибо за комментарий, Игорь! Анонимный Спасибо! А вот еще простое дерево на CSS
http://jsfiddle.net/NZaw4/1/ NMitra Благодарю за пример, он будет полезен читателям! Посмотрите и тег details (html5) http://jsfiddle.net/NMitra/gfuon23b/2/ ( http://shpargalkablog.ru/2013/04/details-html.html ) для Хрома Анонимный Провел всю ночь в шпаргалке блоггера, так и не удалось добиться результата на основе примеров, которые вы привели.
Я буду очень благодарен, если подскажете:

Имеею таблицу. Строку из 5 ячеек. в 1-ых трех ячейках стоят type-radio.
Как добиться, чтобы при выборе 1 (прозрачный цвет), 2(красный цвет), 3(синий цвет) radio цвет ячеек 4 и 5 соответственно изменялся?

С таблицей целиком получается, а отдельно с TD ячейкой не хочет работать. NMitra Здравствуйте. Проблема или с селекторами или с перебором http://shpargalkablog.ru/2013/10/for-javascript.html

var c = document.querySelectorAll(‘input’);
for (var i = 0; i Максим Бойко Работает. Сложность осталась в следующем. На странице имеется целый список из таких строк. В каждой строке присутствует минимум 2 radio элемента. Этот скрипт, понятное дело, меняет цвет во всех td ячейках. Требуется чтобы каждая строка по отдельности меняла цвет. Прошу помощи. У меня есть нынешний скрипт, который работает, но меняет строку tr целиком.

jQuery(document).ready(function() <
jQuery(«input[value=’нет’]»).click(function () <
var name_input = jQuery(this).attr(«name»);
jQuery(«.» + name_input).css(«background»,»#fff»);
>)
jQuery(«input[value=’обычные’]»).click(function () <
var name_input = jQuery(this).attr(«name»);
jQuery(«.» + name_input).css(«background»,»#acacf9″);
>)
jQuery(«input[value=’опасные’]»).click(function () <
var name_input = jQuery(this).attr(«name»);
jQuery(«.» + name_input).css(«background»,»#ff9494″);
>)
>);

За ранее благодарен за помощь. NMitra Так? http://jsfiddle.net/NMitra/veh95qdf/1/

червертая

пятая

третья

червертая

пятая

FOMUVI Здравствуйте. Можно ли добиться для кнопки radio эффект «Я ознакомлен и принимаю условия договора»?
Вот моя таблица: http://i.imgur.com/gfxTqiG.jpg
Форма методом POST отправляет данные с множество столбцов. Хочу, чтобы кнопка «оценить» не была доступна, пока хотя бы один пункт не выбран. Поигрался с примером, ничего не вышло, может есть секрет какой? Буду рад совету, спасибо. NMitra Здравствуйте, тут пока не запустили родительский селектор только JS. Если на радио-input хоть раз нажать, то потом его снять нельзя: http://jsfiddle.net/NMitra/tuq71ym7/

var c = document.querySelectorAll(‘table input’);
for (var i = 0; i FOMUVI Что-то не получается. Я с Java не знаком вообще. Чтобы заработало, нужно обязательно в HEAD поместить скрипт (нет возможности)? И у меня кнопка «оценить» это submit, потому нужно так написать document.querySelector(‘input[type=»submit»]’).disabled = false; ? Кстати, у таблицы есть класс CSS, это не мешает? NMitra Скрипт добавляйте в конец страницы, поближе к футеру, а лучше за него. Вернее сначала HTML, а затем тег Анонимный Супер, спасибо огромное все работает) Анонимный Очень ёмко! А вот вопрос на засыпку:
По нажатию на кнопку меню открывается форма входа, в виде выпадающего списка. в ней есть один чекбокс, и когда на него нажимаешь форма сворачивается. Как это предотвратить? NMitra Нужен код. Анонимный извините за беспокойство, но уже разобралась.
ох уж эти красивые переключатели залипонные!) правда вписать их в дизайн сайта, наверное, довольно сложно. а знаете хоть один пример такой? NMitra Элементы формы так нагляднее получаются http://www.lukew.com/ff/entry.asp?1950 Анонимный Добрый день. Подскажите пожалуйста, что надо добавить что бы сворачивать ветви не зависимо от того что выделено в дереве с чекбоксами, и второй вопрос, как можно свернуть js дерево по событию?
Большое спасибо. NMitra Добрый день,на ваш вопрос не ответить мимоходом, а выделить время я смогу лишь на следующей недели. Если вас устроит, отпишитесь в комментариях. Анонимный Да, конечно устроит. Буду ждать. Большое спасибо. NMitra Независимая работа

var t = document.forms.Tree1;
[].forEach.call(t.querySelectorAll(‘fieldset’), function(eFieldset) <
var main = [].filter.call(t.querySelectorAll(‘[type=»checkbox»]’), function(element) );
main.forEach(function(eMain) <
var l = [].filter.call(eFieldset.querySelectorAll(‘legend’), function(e) );
l.forEach(function(eL) <
var all = eFieldset.querySelectorAll(‘[type=»checkbox»]’);
eL.onclick = function()
eFieldset.onchange = function() <
var allChecked = eFieldset.querySelectorAll(‘[type=»checkbox»]:checked’).length;
eMain.checked = allChecked == all.length;
eMain.indeterminate = allChecked > 0 && allChecked NMitra По второму пункту

document.querySelector(‘#svernut’).onclick = function() <
var all = t.querySelectorAll(‘fieldset’);
for(var i=0; i all[i]. ;
>
>

Весь пример http://jsfiddle.net/NMitra/uewct60o/ Анонимный Здравствуйте. Спасибо. Вы очень помогли, все получилось. Анонимный Здравствуйте, помогите пожалуйста.
Кнопка №6 — for=»payt6″

Я хочу сделать чтобы кнопка, при нажатии показывала невидимый текст.
Пожалуйста отредактируйте код и объясните куда нужно вписывать текст.
Это что-то связанное с концом кода, я прав?
Заранее спасибо NMitra Здравствуйте,

#payt6:not(:checked) + .switch + div <
display: none;
> Анонимный это все не работает, если чекбокс и элемент на который он воздействует находятся не рядом, а например даже через какой-то див, поэтому все это не особо полезно NMitra Что именно делаете. Свой пример на http://jsfiddle.net/ разместите. Там селектор только поправить нужно. Анонимный Был бы признателен, если бы подсказали, как сделать через ксс что бы при отметке чекбокса, кнопка становилась активной?

Вот мой вариант —

Мне исполнилось 18 лет и я согласен с правилами предоставления услуги
описание 1
описание 2

#vvv <
display: none;
>
#vosem:checked

#eee <
display: none;
>
#vosem:checked

#vvv <
display: inline-block;
>

он работает только если инпут и кнопки расположены рядом, а как сделать что бы работало вне зависимости от положения друг относительно другу? NMitra См. http://jsfiddle.net/NMitra/jh1vtnhr/
Родительский селектор есть, но он ещё пока не поддерживается браузерами. Тогда бы совсем просто было. Анонимный Если местами переставить инпут и кнопки, то уже не работает ((( NMitra Без родительского селектора такое на CSS сделать затруднительно, зато на JS без проблем http://jsfiddle.net/NMitra/jh1vtnhr/1/ Анонимный Супер статья ))) побольше бы таких ) Dmytro Iatskyi Спасибо за статью!

Подскажите, пожалуйста, как сделать, в случае дерева чекбоксов, чтобы они не только отмечались в зависимости от отметки родительского, а и выполняли функции, подвязанные на них? В моём случае — это показ/скрытие Overlay на карте Google.

Спасибо! NMitra Внутри функции напишите свою функцию, например, здесь

Переключатели (radiobutton)

Переключатели используют, когда необходимо выбрать один единственный вариант из предложенных. Если требуется выбор нескольких наборов, для этого следует предпочесть флажки (checkbox).

Переключатели создаются следующим образом.

Параметры поля перечислены в таблице.

name
Имя поля. Предназначено для того, чтобы обработчик формы мог идентифицировать это поле.
value Значение поля определяет, что будет отправлено на сервер.
checked Устанавливает элемент выбранный по умолчанию.

Имя поля (параметр name ) для всех элементов группы должно быть одинаковым. Именно в этом случае браузер правильно помечает выбранные пункты (пример 1).

Стилизуем чекбоксы и радиокнопки с 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
Просмотров: 158128
Правила перепечатки

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

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

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

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

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

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

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

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

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

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

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

Урок 10. Форма и элементы: флажок, радиокнопка, поле

В прошлом уроке мы изучили понятие формы. Её основная задача — объединить формы ввода данных определённого типа. Например, форма может объединить данные анкеты, теста и тд. В этом уроке мы научимся делать сами поля ввода!

За заполнение формы отвечает специальный тег , у него есть атрибут type, который позволяет создать определённые заполняемые поля: текстовые поля, радиокнопки, флажки, списки, кнопки. Повторяю, все перечисленные вверху элементы доступны лишь в одном теге — .

Тег в HTML

— это одиночный тег, с помощью которого можно создавать определённые элементы документа (текстовые поля, радиокнопки, флажки, списки, кнопки), которые предназначены для заполнения прямо на html-странице.

Ниже пример работы в HTML

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

name — атрибут, который следует всегда задавать для элемента, чтобы обработчик (скрипт) понимал, input с каким именем он обрабатывает.

Так скрипт обработки поймёт, что это два разных поля.

type — данный атрибут отвечает за указание типа поля. Как уже говорилось ранее, при определённом типе input может стать радиокнопкой, флажком, списком, кнопкой, текстовым поля.

size — атрибут, указывающий размер для текстового поля, когда type указан как text. Указанные данные воспринимаются как ширина поля.

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

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

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

submit — подобное значение атрибута type определяет input как кнопку, при нажатии которой будет прорабатываться определённый сценарий (что такое сценарий вы узнаете позже, изучив языки PHP и JavaScript). Кнопка используется для того, чтобы отправить данные из форм к обработчику, написанному, например, на вышеуказанных языках. Есть и другие, но указал самые популярные.

reset — это ещё один вид кнопки, который обнуляет все значения в форме. после её нажатия их нужно будет заполнить заново.

radio — Данное значение создает радиокнопку, то есть переключатель. Используется, как правило, для значений с небольшим количеством вариантов. Например, выбрать пол, интервал с возрастом и тп. выглядит следующим образом:

У атрибута type задано значение radio — это радиокнопка. В значение value записывается та фраза или слово, которое вы хотите получить, если кто-то выбрал определенную радиокнопку и отправил данные.

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

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

checkbox — это поле, которое работает так же как и радиокнопка. С разницей лишь в том, что можно выделить несколько чекбоксов в качестве вариантов ответа. Также как и с радиокнопкой, если к вопросу принадлежат несколько чекбоксов, то у них атрибут name должен быть соответственно одинаково заполнен. В value соответственно будет указано значение выбранного поля.

Особенности работы полей input

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

Как сделать так, чтобы у пользователя сразу был выбран ответ (чекбокс или радиокнопка)?
Для этого существует одиночный атрибут checked. Его нужно указать в конце тега input. Так как атрибут одиночный, то значений у него никаких нет. Надо лишь добавить его в элемент input. Например, как в записи ниже:

Как сделать так, чтобы напротив чекбокса или радиокнопки был виден текст, поясняющий данный выбор?
Для этого перед и после радиокнопки или чекбокса пишем тег . А само пояснение вставляем также внутри тега. Рассмотрим пример:

Соответственно указываете в теге label, открывающем и закрывающем, сам чекбокс и нужные слова. И внимание! Даже если пользователь нажмёт на слово, то чекбокс всё равно будет выделен.

Стилизация радиокнопок и чекбоксов при помощи CSS

Иногда, когда мы смотрим на радиокнопки или input type checkbox , то у нас возникают неприятные ощущения. Кажется, что они выглядят ужасно. Но пока не посыпалась нецензурные слова, я попытаюсь избавить вас от этого чувства.

Сегодня мы будем работать только с кодом. Для начала сформируем его структуру:

Если эта кнопка покажется вам некрасивой, не беспокойтесь. Так и должно быть, потому что все остальное мы сделаем при помощи CSS .

Первое что нужно сделать, это скрыть элемент, который генерирует саму некрасивую кнопку – тэг input . Мы все равно сможем нажимать ее, даже несмотря на то, что она скрыта. Как? Вложив input type checkbox в label .

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

Радиокнопка

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

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

Гораздо привлекательней, не так ли?

Чекбокс (флажок)

Давайте начнем с простого HTML input type checkbox . Сейчас я хочу превратить переключатель, который вы видите на скриншоте, в нечто подобное:

Действительно красивый переключатель!

Наверняка вы видели input type checkbox , в которых тумблер скользит слева направо при нажатии. Такого эффекта можно легко добиться при помощи CSS . Давайте попробуем.

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

Затем добавьте немного пространства с левой стороны при помощи свойства padding . После этого задайте чекбоксу относительное позиционирование, так как нам нужно, чтобы он содержал в себе и все остальные элементы внутри span :

Перейдем к стилизации CSS input type checkbox при помощи псевдоэлементов :before и :after . Так сгенерированным CSS-кодом будет проще управлять:

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

Пришло время немного украсить эти псевдоэлементы. :after будет выступать в роли фона, а :before отвечать за переключение ползунка. Давайте отредактируем ширину элемента, чтобы он стал больше. Также не забудьте добавить inset shadow , чтобы он выглядел как бы вдавленным. Кроме этого не забываем про красный фон, который будет интуитивно указывать на “ выключенный ” режим:

Что касается :before , то нам нужно сделать так, чтобы элемент стал круглым, а также немного « приподнять » его при помощи эффекта box-shadow :

Во « включенном » режиме нам нужно сместить ползунок HTML input type checkbox в сторону, и изменить цвет фона с красного на оттенок голубого:

На этом все! Наши красивые чекбоксы и радиокнопки готовы!

Данная публикация представляет собой перевод статьи « Styling Radio and Check buttons with CSS » , подготовленной дружной командой проекта Интернет-технологии.ру

Стилизуем чекбоксы и радиокнопки с 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
Просмотров: 158129
Правила перепечатки

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

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

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

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

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

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

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

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

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

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

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

Мастер Йода рекомендует:  Паттерн Active Record в PHP
Добавить комментарий