Css для radio кнопок

How TO — Custom Checkbox

Learn how to create custom checkboxes and radio buttons with CSS.

Custom checkbox:

Custom radio button:

How To Create a Custom Checkbox

Step 1) Add HTML:

Example

Step 2) Add CSS:

Example

/* Customize the label (the container) */
.container display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
>

/* Hide the browser’s default checkbox */
.container input position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
>

/* Create a custom checkbox */
.checkmark position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
>

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark background-color: #ccc;
>

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark background-color: #2196F3;
>

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after content: «»;
position: absolute;
display: none;
>

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after display: block;
>

/* Style the checkmark/indicator */
.container .checkmark:after left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
>

How To Create a Custom Radio Button

Example

/* Customize the label (the container) */
.container display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
>

/* Hide the browser’s default radio button */
.container input position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
>

/* Create a custom radio button */
.checkmark position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 50%;
>

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark background-color: #ccc;
>

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark background-color: #2196F3;
>

/* Create the indicator (the dot/circle — hidden when not checked) */
.checkmark:after content: «»;
position: absolute;
display: none;
>

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after display: block;
>

/* Style the indicator (dot/circle) */
.container .checkmark:after top: 9px;
left: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
>

Источник

Стилизация Radio Button

Несколько примеров изменения вида радио кнопок на чистом CSS. Единственное неудобство метода в том, что приходится указывать уникальные id.

Стандартные элементы

Понадобятся всего два изображения, которые можно объединить в спрайт. Состояния заблокированного элемента и при наведении можно сделать CSS фильтрами.

 
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 в виде кнопок

 
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