Как сделать radiobutton css

How TO — Custom Checkbox

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

Default:

Custom checkbox:

One Two Three Four

Custom radio button:

One Two Three Four

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;
>

Стилизация радиокнопок на CSS

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

Изображаем настоящую радиокнопку на HTML

Отрисовывается радиокнопка с помощью тега input с типом radio. Обычно в комплекте с кнопкой идет label — привязанная к кнопке метка в виде текста. Когда мы кликаем по тексту, то радиокнопка становится выбранной, необязательно целиться в сам кругляш.

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

Чтобы было из чего выбирать, создадим вторую радиокнопку. Обе кнопки будет объединять атрибут name с одинаковым значением — payment. У объединенных радиокнопок в группу по атрибуту name, можно будет выбрать только одну. Общий класс form-group задает отступы между кнопками. А класс real-radio-btn скрывает реальную радиокнопку. Выбранная радиокнопка передает на сервер значение, чтобы было понятно, что именно выбрал пользователь. Поэтому пропишем каждой радиокнопке свое уникальное значения value.

<div >
<label>
<input type="radio" name="payment" value="paypal" >
Оплата Paypal
</label>
</div>
<div >
<label>
<input type="radio" name="payment" value="card" >
Оплата кредитной картой
</label>
</div>

Кастомная радиокнопка

Идея кастомизации реальной кнопки заключается в ее сокрытии и создании рядом новой кастомной радио кнопки. По другому никак, с помощью CSS нельзя изменить внешний вид инпута. Кастомная радиокнопка будет выполнять маскировочно-декоративную роль для реальной кнопки.

HTML код кастомной кнопки мы разместим следующей строчкой под инпутом.

Теперь у нас есть реальная и кастомная радиокнопки, но чтобы что-то изменилось необходимо задействовать CSS стили. Кастомная кнопка состоит из внешнего и внутреннего круга. Чтобы не создавать лишнего тега, нарисуем внутренний круг с использованием псевдоэлемента before.

/* Рисуем внешний круг радиокнопки*/
.custom-radio-btn <
position: relative; /* Родительский элемент*/
display: inline-block; /* Для применения рамок, размеров*/
width: 16px;
height: 16px;
background: #fff;
border: 2px solid #e80cf0; /* Толщина, стиль, цвет рамки*/
border-radius: 50%; /* Получение круга*/
vertical-align: text-top; /* Выравнивание кнопки по центру*/
margin-right: 5px; /* Отступ между кнопкой и меткой*/
>

/* Рисуем внутренний круг */
.custom-radio-btn::before <
content: &#039;&#039;;
display: inline-block;
width: 8px;
height: 8px;
background: #a3a4a7;
border-radius: 50%;

/* Выравниваем по центру относительно внешнего круга */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(0);

/* Плавный переход трансформации масштабирования */
transition: 0.2s ease-in;
>

Как работает механизм checked у кастомной кнопки

Кастомная кнопка сама по себе не может быть выбрана, если мы кликнем по ней или по тексту. Когда мы кликаем по тексту, то выбирается реальная кнопка, только кастомная кнопка об этом не знает. Формируем сложный селектор из реальной кнопки и соседней. Селектор с оператором (+) как раз создаст зависимость появления внутреннего круга от состояния реальной кнопки. Если реальная кнопка находится в состоянии checked, значит выполняется свойство трансформации для кастомного внутреннего круга.

.real-radio-btn:checked + .custom-radio-btn::before <
transform: translate(-50%, -50%) scale(1);
>

Скрываем реальную радио кнопку

Нельзя использовать свойство display: none, тогда не будет работать табуляция (клавиша tab).

.real-radio-btn <
/* Скрываем реальную радио кнопку*/
width: 0;
height: 0;
position: absolute;
opacity: 0;
z-index: -1;
>

Без хороших знаний HTML|CSS будет трудно освоить профессию верстальщика. Мой видеокурс в короткие сроки научит верстать вас сайты любой сложности.

Как сделать проверку radiobutton в javascript?

Добрый вечер. Есть 2 радиобаттона, как сделать проверку с помощью if, что выбран первый?

функция check проверяет на чистом JS без каких-либо библиотек, а функция check2 с использованием jQuery

&#x412;&#x441;&#x451; &#x435;&#x449;&#x451; &#x438;&#x449;&#x435;&#x442;&#x435; &#x43E;&#x442;&#x432;&#x435;&#x442;? Посмотрите другие вопросы с метками javascript или задайте свой вопрос.

дизайн сайта / логотип &#169; 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.3.40888

Нажимая &#171;Принять все файлы cookie&#187; вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *