1

делаю слайдер (пока картинок нет, они будут справа). пока что временно сделал чекбоксы побольше. мне нужно при нажатии на чекбокс менять цвет, фон и рамку у соответствующего labe

.container{
  width:500px;
  height:500px;
  
  margin:0 auto;
  
  outline:1px solid #aaa;
  
  display:flex;
}

.label-container{
  display:flex;
  flex-direction:column;
  width:100px;
}
.label-container label{
  font-size:3em;
  font-weight:bold;
  text-align:center;
  background:black;
  color:white;
  line-height:3.47;
   transition: background-color 0.2s;
  border-bottom:1px solid red;
}
/*отмечаю чекбокс и label меняет цвет, фон и рамку снизу */
.img-container #btn-1:checked ~ .label-container label[for="btn-1"],
.img-container #btn-2:checked ~ .label-container label[for="btn-2"],
.img-container #btn-3:checked ~ .label-container label[for="btn-3"]{
  background-color:red;
  color:black;
  border-color:black;
}

.img-container{
  
}
.img-container input{
  width:30px;
  height:30px;
  display:inline-block;
}
<div class="container">
  <div class="label-container">
    <label for="btn-1">1</label>
    <label for="btn-2">2</label>
    <label for="btn-3">3</label>
  </div>
  <div class="img-container">
    <input type="radio" id="btn-1" name="toggle" checked>
    <input type="radio" id="btn-2" name="toggle" >
    <input type="radio" id="btn-3" name="toggle" >
  </div>
</div>

2
  • Если хотите обойтись без js и сделать на чистом css, придётся поменять вёрстку. Инпуты и лейблы должны лежать в одном контейнере, причём инпуты должны идти раньше. Тогда можно применить такое правило: #btn-1:checked ~ label[for="btn-1"] { ... } 2 июл 2020 в 18:18
  • Когда то раньше я так же делал подобный слайдер, если хотите можете воспользоваться моим codepen.io/Crook/pen/LldiH 21 июл 2020 в 20:36

0

Ваш ответ

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

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