1

Не могу понять в чём проблема, а именно почему не происходит переключение между <input type="radio">:

.slider {
  width: 700px;
  height: 350px;
  border: 1px solid #888;
  position: relative;
  text-align: center;
}

.slider>input {
  display: none;
}

.slider>input+label {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 8px;
  background: rgba(90, 90, 90, 0.8);
  border: 2px solid rgba(190, 190, 190, 0.8);
  cursor: pointer;
  z-index: 100;
  position: relative;
  margin-right: 4px;
  top: 90%;
  transition: background 0.8s ease-out 0s;
}

.slider>input+label:hover {
  background: rgba(250, 250, 250, 0.8);
}

.slider>input:checked+label {
  background: black;
}
<div class="slider">
  <input type="radio" name="sliderbutton" id="slider_chek1_1" checked>
  <label for="slider_check1_1"></label>
  <input type="radio" name="sliderbutton" id="slider_chek1_2">
  <label for="slider_check1_2"></label>
  <input type="radio" name="sliderbutton" id="slider_chek1_3">
  <label for="slider_check1_3"></label>
  <input type="radio" name="sliderbutton" id="slider_chek1_4">
  <label for="slider_check1_4"></label>
  <input type="radio" name="sliderbutton" id="slider_chek1_5">
  <label for="slider_check1_5"></label>
</div>

2 ответа 2

0
slider_chek1_x != slider_check1_x

Атрибуты id чекбоксов написаны с ошибкой - пропущена буква "c" - и отличаются от атрибутов for лейблов.

2
  • Igor можешь в двух словах объяснить, что делает эта запись, как и самое важное куда ее прописать. Мой уровень в верстке дилетант. Догнать не могу почему в источнике (helpful-stuff.ru/2014/08/kak-sdelat-slider-na-css.html) все работает без этого. 21 апр 2018 в 14:11
  • Спасибо парни! Косяк на невнимательности. 21 апр 2018 в 15:27
0

Ошибка в имени id! Разные значения у label и input:

.slider {
  width: 700px;
  height: 350px;
  border: 1px solid #888;
  position: relative;
  text-align: center;
}

.slider>input {
  display: none;
}

.slider>input+label {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 8px;
  background: rgba(90, 90, 90, 0.8);
  border: 2px solid rgba(190, 190, 190, 0.8);
  cursor: pointer;
  z-index: 100;
  position: relative;
  margin-right: 4px;
  top: 90%;
  transition: background 0.8s ease-out 0s;
}

.slider>input+label:hover {
  background: rgba(250, 250, 250, 0.8);
}

.slider>input:checked+label {
  background: black;
}
<div class="slider">
  <input type="radio" name="sliderbutton" id="slider_chek1_1" checked>
  <label for="slider_chek1_1"></label>
  <input type="radio" name="sliderbutton" id="slider_chek1_2">
  <label for="slider_chek1_2"></label>
  <input type="radio" name="sliderbutton" id="slider_chek1_3">
  <label for="slider_chek1_3"></label>
  <input type="radio" name="sliderbutton" id="slider_chek1_4">
  <label for="slider_chek1_4"></label>
  <input type="radio" name="sliderbutton" id="slider_chek1_5">
  <label for="slider_chek1_5"></label>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.