Уважаемые друзья и пользователи сайта ART-UCOZ!
Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!
Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.
Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!
Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.
Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!
Подобные просьбы и вопросы - будут игнорироваться!
Вид переключения radio кнопок
Дата добавления: 05.04.2017 - 01:55
Категория: Кнопки / иконки
Добавил: Buger
Количество просмотров: 1.3k
Количество комментариев: 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/
Добавлять комментарии могут только зарегистрированные пользователи.
Поделись с друзьями: