Интернет магазин шабонов
Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Вид переключения radio кнопок

Дата добавления: 05.04.2017 - 01:55
Категория: Кнопки / иконки
Добавил: Buger
Количество просмотров: 112
Количество комментариев: 0
Размер файла: 3.2Kb
Рейтинг материала: 5.0 / 1
Вид переключения radio кнопок
рейтинг 5.0
/
голосов 1
Интересное решение для стилизации radio кнопок. Отлично подойдет для сайтов темной цветовой гаммы, но учитывайте тот момент, что вы можете изменить окраску, на нужную вам :)

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>


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


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


Источник: http://art-ucoz.ru/
Добавлять комментарии могут только зарегистрированные пользователи.