Пользовательский переключатель не выбирается при нажатии - PullRequest
Новая
       7

Пользовательский переключатель не выбирается при нажатии

0 голосов
/ 07 сентября 2018 

/* radio buttons */
 .radio-container {
	 display: block;
	 position: relative;
	 cursor: pointer;
	 -webkit-user-select: none;
	 -moz-user-select: none;
	 -ms-user-select: none;
	 user-select: none;
	 padding-left: 1.5em;
	 margin-bottom: 0.75em;
}
 .radio-container input {
	 position: absolute;
	 opacity: 0;
	 cursor: pointer;
}
 .radio-container input:checked .radio:after {
	 display: block;
}
 .radio-container:hover .radio {
	 background: gray;
}
/* custom radio button */
 .radio {
	 position: absolute;
	 top: 0;
	 left: 0;
	 height: 1em;
	 width: 1em;
	 background-color: transparent;
	 border: 1px solid gray;
	 border-radius: 50%;
}
 .radio:after {
	 content: "";
	 position: absolute;
	 display: none;
	 top: 0;
	 left: 0;
	 width: 0.25em;
	 height: 0.25em;
	 border-radius: 50%;
	 background: white;
}
 
<form class="recharge">
  <div>
  <label class="radio-container" for="subscribe">
  <input type="radio" id="one-time" name="recharge">
  <span class="radio"></span>
  Subscribe & Save 10%
  </label>
  </div>
  <div>
  <label class="radio-container" for="one-time">
  <input type="radio" id="one-time" name="recharge">
  <span class="radio"></span>
  One Time Purchase
  </label>
  </div>
</form>

Я добавил пользовательские стили для переключателей на моем веб-сайте, чтобы придать им собственный стиль. Мой код HTML и CSS прилагается в приведенном выше фрагменте. Однако теперь, когда я нажимаю на вход, он не выбирает. В идеале мне бы хотелось, чтобы это работало без компонента JS.

1 Ответ

0 голосов
/ 07 сентября 2018

Пожалуйста, найдите решение вашей проблемы:

Кодовая ссылка на решение

Одна из проблем, которую я обнаружил, заключалась в том, что вы не указали цвет посленажата кнопка радио, а также отсутствует селектор брата.Я специально добавил эти строки: 

.radio-container input:checked ~ .radio {
background-color: #2196F3;
}

Надеюсь, это поможет !!Благодаря.

...