Стилизация радиокнопок на CSS
Здравствуйте дорогие товарищи. Сегодня перед Вами откроется тема стилизации радиокнопок на CSS. Всем Вам должно быть известно,
что оформить стили для радиокнопок не так-то просто, как кажется на самом деле. Дело далеко не легкое, особенно если при создании сайта на заказ заказчик требует
оформления радиокнопок по его дизайну. Можно использовать в таком случае JavaScript, однако не хочется прибегать к использованию скриптов и прочих
премудростей, а обойтись лишь одним использованием языка HTML и CSS. Скажу Вам сразу, что реализовать это вполне возможно, и мы
будем этим заниматься в данном уроке.
Давайте приступим. Для начала нам потребуется html разметка, которую мы и напишем:
<html>
<head>
<title>Радиокнопки на CSS</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<div class="radio">
<label for="radio1">
<input type="radio" name="buttons" id="radio1">
<span>Радио 1</span>
</label>
<label for="radio2">
<input type="radio" name="buttons" id="radio2">
<span>Радио 2</span>
</label>
<label for="radio3">
<input type="radio" name="buttons" id="radio3">
<span>Радио 3</span>
</label>
</div>
</body>
</html>
Немного проясню ситуацию. Мы создаем блок, в который включаем тег label, который будет связывать радиокнопку, с определенной меткой. Внутри этой метки мы создаем саму кнопку, и тег span, в который помещаем некоторый текст, отвечающий за эту радиокнопку, т.е., некоторое пояснение которое будет выбрано Вами (например: Вариант 1, Вариант 2, Вариант 3). Теперь при помощи стилей реализуем нашу задачу:
input[type="radio"] {
border: none;
clip: rect(0, 0, 0, 0);
overflow: hidden;
position: absolute;
height: 1px;
width: 1px;
}
label {
display: block;
cursor: pointer;
font-size: 20px;
line-height: 45px;
}
input[type="radio"] + span {
display: block;
}
input[type="radio"] + span:before {
content: '';
display: inline-block;
border-radius: 15px;
border: 2px solid #fff;
box-shadow: 0 0 0 5px #000;
margin-right: 20px;
vertical-align: middle;
transition: 0.7s ease all;
height: 21px;
width: 21px;
}
input[type="radio"]:checked + span:before {
background: #00f;
box-shadow: 0 0 0 5px #000;
}
.radio {
margin: 0 auto;
width: 300px;
}
Вот мы и реализовали радиокнопки на CSS. Вначале Мы скрываем нашу основную радиокнопку, и при помощи псевдоэлемента before реализуем нужную нам кнопку. С помощью псевдокласса checked изменяем ее вид при нажатии. Это и есть основные стили, при помощи которых мы реализуем радиокнопку. Ничего сложного в реализации нет, тем более Вы можете использовать вместо всех этих стилей для кнопки, обычную картинку, а при включении изменять ее. Можете скопировать себе данный код и немного поиграться с ним, изменяя различные свойства или добавляя собственные, так Вы более тщательно освоите данную тему. На этом я прощаюсь с Вами, до скорого!
