Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!
Подобные просьбы и вопросы - будут игнорироваться!
Вид переключения radio кнопок
Дата добавления: 05.04.2017 - 01:55
Категория: Кнопки / иконки
Добавил: Buger
Количество просмотров: 1.1k
Количество комментариев: 0
Размер файла: 3.2 Kb
Рейтинг материала: 5.0 / 1
БЕСПЛАТНО
рейтинг
5.0
/
голосов
1
Интересное решение для стилизации radio кнопок. Отлично подойдет для сайтов темной цветовой гаммы, но учитывайте тот момент, что вы можете изменить окраску, на нужную вам :)
HTML
CSS
JS обработчик
Источник: http://art-ucoz.ru/
HTML
Код
<fieldset id="radio-group">
<legend>Выбирите нужную группу</legend>
<label for="no" class="input-label"><input type="radio" value="no"name="options" id="no"/><span>Группа №1</span></label>
<label for="no2" class="input-label"><input type="radio" value="no2"name="options" id="no2"/><span>Группа №2</span></label>
<label for="nox" class="input-label"><input type="radio" value="nox"name="options" id="nox"/><span>Группа №3</span></label>
</fieldset>
<legend>Выбирите нужную группу</legend>
<label for="no" class="input-label"><input type="radio" value="no"name="options" id="no"/><span>Группа №1</span></label>
<label for="no2" class="input-label"><input type="radio" value="no2"name="options" id="no2"/><span>Группа №2</span></label>
<label for="nox" class="input-label"><input type="radio" value="nox"name="options" id="nox"/><span>Группа №3</span></label>
</fieldset>
CSS
Код
.radio-container {
margin-top: 50px;
position: relative;
width: 100%;
max-width: 350px;
padding: .5em 1em;
padding-bottom: 1em;
font-family: 'helvetica neue', sans-serif;
color: #fff;
border-radius: 10px;
border: 1px solid #f1f1f1;
}
.input-label {
display: block;
cursor: pointer;
line-height: 2.5;
margin-left: .5em;
}
.hidden,
[type="radio"] {
position: absolute;
margin: -1px;
height: 1px;
width: 1px;
border: 0;
clip: rect(0 0 0 0);
overflow: hidden;
}
.active-icon,
[type="radio"]+span:before {
content: '';
display: inline-block;
height: 1em;
width: 1em;
margin-right: .8em;
vertical-align: -0.15em;
border: 0.125em solid #333;
box-shadow: 0 0 0 0.1em #aaa;
transition: 200ms ease-out;
}
[type="radio"]+span {
display: inline-block;
color: #aaa;
}
[type="radio"]+span:before {
border-radius: 50%;
}
[type="radio"]:checked+span {
color: #f1f1f1;
}
[type="radio"]:checked+span:before {
background-color: #f1f1f1;
box-shadow: 0 0 0 0.15em #f1f1f1;
}
[type="radio"]:focus+span:before {
transform: scale(1.2);
}
margin-top: 50px;
position: relative;
width: 100%;
max-width: 350px;
padding: .5em 1em;
padding-bottom: 1em;
font-family: 'helvetica neue', sans-serif;
color: #fff;
border-radius: 10px;
border: 1px solid #f1f1f1;
}
.input-label {
display: block;
cursor: pointer;
line-height: 2.5;
margin-left: .5em;
}
.hidden,
[type="radio"] {
position: absolute;
margin: -1px;
height: 1px;
width: 1px;
border: 0;
clip: rect(0 0 0 0);
overflow: hidden;
}
.active-icon,
[type="radio"]+span:before {
content: '';
display: inline-block;
height: 1em;
width: 1em;
margin-right: .8em;
vertical-align: -0.15em;
border: 0.125em solid #333;
box-shadow: 0 0 0 0.1em #aaa;
transition: 200ms ease-out;
}
[type="radio"]+span {
display: inline-block;
color: #aaa;
}
[type="radio"]+span:before {
border-radius: 50%;
}
[type="radio"]:checked+span {
color: #f1f1f1;
}
[type="radio"]:checked+span:before {
background-color: #f1f1f1;
box-shadow: 0 0 0 0.15em #f1f1f1;
}
[type="radio"]:focus+span:before {
transform: scale(1.2);
}
JS обработчик
Код
const fieldset = document.querySelector('#radio-group');
const findRadio = (e) => {
if (e.target && e.target.nodeName === "INPUT") {
console.log(e.target.value)
}
}
fieldset.addEventListener('click', findRadio);
const findRadio = (e) => {
if (e.target && e.target.nodeName === "INPUT") {
console.log(e.target.value)
}
}
fieldset.addEventListener('click', findRadio);
Источник: http://art-ucoz.ru/
Добавлять комментарии могут только зарегистрированные пользователи.
Поделись с друзьями: