Как сделать заливку?

202

24 декабря 2021, 09:40

Есть код - https://jsfiddle.net/npt6o30m/

Подскажите пожалуйста, как сделать так, чтобы атрибут checked срабатывал не только для текста, но и для всей кнопки в целом. Я понимаю, что я должен делать не .question-answers label input[type="radio"]:checked ~ .label-text, а так

.question-answers input[type="radio"]:checked ~ label но почему-то это не работает.

Подскажите пожалуйста как сделать заливку всей кнопки.

Answer 1

.question-answers input[type="radio"]:checked ~ label

не работает, потому что:

Комбинатор '~' выбирает элементы, которые находятся на этом же уровне вложенности, после указанного элемента, с тем же родителем.

а у вас инпут лежит внутри лейбла.

body { 
  margin: 0; 
  height: 100vh; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  background-color: black; 
} 
 
input { 
  display: none; 
} 
 
label { 
  display: block; 
  padding: 10px; 
  border: 2px solid white; 
  color: white; 
  cursor: pointer; 
  transition: all .3s ease-out; 
} 
 
label:hover { 
  background-color: #1f1f1f; 
} 
 
input:checked ~ label { 
  background-color: white; 
  color: black; 
}

<div> 
  <input type="checkbox" id="qwe"> 
  <label for="qwe">Нажми</label> 
</div>

Вариант с той же разметкой:

body { 
  margin: 0; 
  height: 100vh; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  background-color: black; 
} 
 
input { 
  opacity: 0; 
  position: absolute; 
} 
 
label { 
  display: block; 
  padding: 10px; 
  border: 2px solid white; 
  color: white; 
  cursor: pointer; 
  transition: all .3s ease-out; 
  position: relative; 
} 
 
label:hover { 
  background-color: #1f1f1f; 
} 
 
label:focus-within { 
  background-color: white; 
  color: black; 
}

<div class="question-answers"> 
<label><input type="radio"><span class="label-text">Нажми</span></label> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Не работает Boost. Undefined reference to `boost::system::generic_category()'

Работает #include <boost/algorithm/stringhpp>,

182

c++

Найти площадь по координатам

Треугольник задается координатами своих вершин на плоскости: A(x1, y1), В (х2,, у2), С (х3, y3)Найти площадь треугольника ABC

172

c++

Как удалить дубликаты из std::list? [дубликат]

Есть такая структура:

c++

Почему-то работает не так как должно

Есть у меня код: