Как изменить состояние элемента при проверке радио?

Question

У меня есть форма, которая отображается с использованием языка шаблонов Django.То, что я хочу сделать, это сделать метку непрозрачной для соответствующей радиокнопки, когда установлен флажок.Проблема в том, что я не могу правильно нацелить ярлык.Я пробовал несколько различных вариантов с строкой "#id_type input [type = radio]: check ~ #id_type label" в моем css.Тот, который был опубликован, является последним, который не сработал.Если кто-то может указать на проблему, это было бы здорово.Спасибо.

# HTML (actual code)

<form class="form1" action="" method="post" novalidate>
...
{% for field in form %}
{% if field is form.type %}

  <div class="paymentRadio">
    {% render_field field placeholder=field.label %}
  </div>

  {% else %}
  ...

# HTML (inspect element)
<div class="paymentRadio">
  <ul id="id_0-type">

    <li><label for="id_0-type_0"><input type="radio" name="0-type" value="Label1" placeholder="Type" required="" id="id_0-type_0">
      Label1</label>
    </li>

    <li><label for="id_0-type_1"><input type="radio" name="0-type" value="Label2" placeholder="Type" required="" id="id_0-type_1">
      Label2</label>
    </li>

  </ul>
</div>

# CSS

#id_0-type {
    display: inline-block;
    height: auto;
    width: auto;
    font-family: helvetica;
    font-size: 1.75rem;
    transition: border-color .25s ease, box-shadow .25s ease;
    position: relative;
    margin: 0 auto;
    float: left;
}

#id_0-type input[type=radio] {
  position: absolute;
  visibility: hidden;
}

#id_0-type label {
  height: auto;
  font-weight: normal;
  font-size: 2rem;
  color: $white;
  background: $black;
  text-align: center;
  top: .5rem;
  position: relative;
  margin: 0 auto;
  padding: 1rem;
  display: block;
  z-index: 2;
  cursor: pointer;
  -webkit-transition: all 0.25s linear;
  opacity: .5;
&:hover{
  opacity: 1;
}}

# THIS SEEMS TO BE THE PROBLEM 

#id_0-type input[type=radio]:checked ~ #id_type label {
  opacity: 1;
}

Answer 1

В вашем HTML была проблема.Ваш вход был внутри ярлыка, и вы пытались стилизовать ярлык, который был родителем.CSS не позволяет нам стилизовать родителя.Я отделил вход от метки и исправил это.

#id_0-type {
  display: inline-block;
  height: auto;
  width: auto;
  font-family: helvetica;
  font-size: 1.75rem;
  transition: border-color .25s ease, box-shadow .25s ease;
  position: relative;
  margin: 0 auto;
  float: left;
}

#id_0-type input[type=radio] {
  position: absolute;
  visibility: hidden;
}

#id_0-type label {
  height: auto;
  font-weight: normal;
  font-size: 2rem;
  color: white;
  background: black;
  text-align: center;
  top: .5rem;
  position: relative;
  margin: 0 auto;
  padding: 1rem;
  display: block;
  z-index: 2;
  cursor: pointer;
  -webkit-transition: all 0.25s linear;
  opacity: .5;
}

#id_0-type label:hover {
  opacity: 1;
}

#id_0-type input[type=radio]:checked ~ label {
  opacity: 1;
}

<div class="paymentRadio">
  <ul id="id_0-type">

    <li>
      <input type="radio" name="0-type" value="Label1" placeholder="Type" required="" id="id_0-type_0">
      <label for="id_0-type_0">
      Label1</label>
    </li>

    <li>
      <input type="radio" name="0-type" value="Label2" placeholder="Type" required="" id="id_0-type_1"><label for="id_0-type_1">
      Label2</label>
    </li>

  </ul>
</div>