Welcome to Tutorialspoint

 
Radio button 1 
 
Radio button 2 
 
Radio button 3 
 
Radio disabled 

.form_radio < margin-bottom: 10px; >.form_radio input[type=radio] < display: none; >.form_radio label < display: inline-block; cursor: pointer; position: relative; padding-left: 25px; margin-right: 0; line-height: 18px; user-select: none; >.form_radio label:before < content: ""; display: inline-block; width: 17px; height: 18px; position: absolute; left: 0; bottom: 1px; background: url(/img/radio-1.png) 0 0 no-repeat; >/* Checked */ .form_radio input[type=radio]:checked + label:before < background: url(/img/radio-2.png) 0 0 no-repeat; >/* Hover */ .form_radio label:hover:before < filter: brightness(120%); >/* Disabled */ .form_radio input[type=radio]:disabled + label:before

 
Radio button 1 
 
Radio button 2 
 
Radio button 3 
 
Disabled 

.form_radio_btn < display: inline-block; margin-right: 10px; >.form_radio_btn input[type=radio] < display: none; >.form_radio_btn label < display: inline-block; cursor: pointer; padding: 0px 15px; line-height: 34px; border: 1px solid #999; border-radius: 6px; user-select: none; >/* Checked */ .form_radio_btn input[type=radio]:checked + label < background: #ffe0a6; >/* Hover */ .form_radio_btn label:hover < color: #666; >/* Disabled */ .form_radio_btn input[type=radio]:disabled + label

 
Radio button 1 
 
Radio button 2 
 
Radio button 3 
 
Disabled 
 

.form_radio_group < display: inline-block; overflow: hidden; >.form_radio_group-item < display: inline-block; float: left; >.form_radio_group input[type=radio] < display: none; >.form_radio_group label < display: inline-block; cursor: pointer; padding: 0px 15px; line-height: 34px; border: 1px solid #999; border-right: none; user-select: none; >.form_radio_group .form_radio_group-item:first-child label < border-radius: 6px 0 0 6px; >.form_radio_group .form_radio_group-item:last-child label < border-radius: 0 6px 6px 0; border-right: 1px solid #999; >/* Checked */ .form_radio_group input[type=radio]:checked + label < background: #ffe0a6; >/* Hover */ .form_radio_group label:hover < color: #666; >/* Disabled */ .form_radio_group input[type=radio]:disabled + label

Переключатель

.form_toggle < display: inline-block; overflow: hidden; >.form_toggle-item < float: left; display: inline-block; >.form_toggle-item input[type=radio] < display: none; >.form_toggle-item label < display: inline-block; padding: 0px 15px; line-height: 34px; border: 1px solid #999; border-right: none; cursor: pointer; user-select: none; >.form_toggle .item-1 label < border-radius: 6px 0 0 6px; >.form_toggle .item-2 label < border-radius: 0 6px 6px 0; border-right: 1px solid #999; >/* Checked */ .form_toggle .item-1 input[type=radio]:checked + label < background: #ffc5c5; >.form_toggle .item-2 input[type=radio]:checked + label

Источник

How to change the color of the radio button using CSS?

Radio button is a common form element. It allows users to select a single option from a group of options. It is often used in conjunction with a group of labels, each associated with a corresponding radio button. In this article, we will look at how to change the color of radio buttons using CSS.

What is Radio Button?

A radio button is a small round button on a webpage or application that lets users pick one option from a group of choices. It is also known as an «option button,». It is often used in forms, surveys, and quizzes, where only one option can be selected at a time.

Change the color of radio buttons using CSS

Customizing the appearance of radio buttons is a common task for web developers and designers. One aspect that can be modified is the color of the radio buttons. This can be done by using the CSS attribute selector, which allows users to select elements based on their attributes. For example, to select all radio buttons, we can use the following CSS code −

After selecting the radio buttons, we use CSS to change their color. This can be done by using the color property. For example, to change the color of all radio buttons to green, we can use the following CSS code −

Example

This is an example to change the color of the radio button.

   body < text-align:center; >input[type=radio] 
Change the color of radio buttons using CSS
 Radio Button   

As well, we can change the color of radio buttons by using the background-color property. This can be useful if we want to change the color of the entire button, including the button itself and any space surrounding it. For example, to change the background color of all radio buttons to blue, we can use the following CSS code −

Example

This is one more example to change the color of the radio button.

  body < text-align:center; >input[type=radio] < appearance: none; padding: 10px; background-color: yellow; border-radius:50%; >input[type=radio]:checked 
Change the color of radio buttons using CSS
 
 Radio Button 
   

Conclusion

CSS allows for the easy customization of radio button colors. By selecting the radio buttons using the attribute selector and utilizing properties such as color and background-color. The use of pseudo-class also allows for the modification of radio button colors in specific states. With these techniques, radio buttons can be tailored to provide an optimal user experience.

Источник

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

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

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

/* Мои флажки */ 
 Флажок 1 
 
 Флажок 2 
 
 Флажок 3 
 /* Мои переключатели */ 
 Переключатель 1 
 
 Переключатель 2 
 
 Переключатель 3 
 

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

input[type="checkbox"]:checked, input[type="checkbox"]:not(:checked), input[type="radio"]:checked, input[type="radio"]:not(:checked) < position: absolute; left: -9999px; >input[type="checkbox"]:checked + label, input[type="checkbox"]:not(:checked) + label, input[type="radio"]:checked + label, input[type="radio"]:not(:checked) + label

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

input[type="checkbox"]:checked + label:before, input[type="checkbox"]:not(:checked) + label:before, input[type="radio"]:checked + label:before, input[type="radio"]:not(:checked) + label:before < content: ""; position: absolute; left: 0px; top: 0px; width: 18px; height: 18px; border: 1px solid #dddddd; background-color: #ffffff; >input[type="checkbox"]:checked + label:before, input[type="checkbox"]:not(:checked) + label:before < border-radius: 2px; >input[type="radio"]:checked + label:before, input[type="radio"]:not(:checked) + label:before

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

input[type="checkbox"]:checked + label:after, input[type="checkbox"]:not(:checked) + label:after, input[type="radio"]:checked + label:after, input[type="radio"]:not(:checked) + label:after < content: ""; position: absolute; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; >input[type="checkbox"]:checked + label:after, input[type="checkbox"]:not(:checked) + label:after < left: 3px; top: 4px; width: 10px; height: 5px; border-radius: 1px; border-left: 4px solid #e145a3; border-bottom: 4px solid #e145a3; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); >input[type="radio"]:checked + label:after, input[type="radio"]:not(:checked) + label:after

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

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

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

input[type="checkbox"]:not(:checked) + label:after, input[type="radio"]:not(:checked) + label:after < opacity: 0; >input[type="checkbox"]:checked + label:after, input[type="radio"]:checked + label:after

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

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

Источник