При нажатии checkbox input не срабатывает правило

Question

Создал кастомный чекбокс, чтобы при его нажатии появлялся другой блок. Для появляющегося блока выставлено значение opacity: 0. При нажатии на чекбокс прописал правило чтоб блок сделал opacity: 1. Но он не работает. В чем проблема?

.disk-count {
  border: 1px solid #f1f1f7;
  display: flex;
  align-items: center;
  width: auto;
  border-radius: 2px;
  padding: 6px;
  max-height: 32px;
  margin-left: 25px;
  opacity: 0;
}
input[name="disk-1"] ~ .disk-count {
  opacity: 1;
  transition: 0.25s;
}
.disk-checkbox {
  /* display: block; */
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 35px;
  cursor: pointer;
}

   <div class="disk-select">
     <label class="disk-checkbox">
       <p>20000 МБ</p>
       <input type="checkbox" checked="checked" name="disk-1" />
       <span class="checkmark"></span>
     </label>
     <div class="disk-count">
       <button>-</button>
       <input type="text" value="1" />
       <button>+</button>
     </div>
  </div>

Answer 1

Чтобы селектор ~ сработал, элементы должны стоять рядом и на одном уровне вложенности.

.disk-count {
  border: 1px solid #f1f1f7;
  display: flex;
  align-items: center;
  width: auto;
  border-radius: 2px;
  padding: 6px;
  max-height: 32px;
  margin-left: 25px;
  opacity: 0;
}

input[name="disk-1"]:checked ~ .disk-count {
  opacity: 1;
  transition: .25s opacity;
}

.disk-checkbox {
  padding-left: 25px;
  cursor: pointer;
}

<div class="disk-select">
    <span class="disk-checkbox">20000 МБ</span>
    <input type="checkbox" name="disk-1">
    <span class="checkmark"></span>
    <div class="disk-count">
        <button>-</button>
        <input type="text" value="1">
        <button>+</button>
    </div>
</div>

БЛОГ НА HUSL

При нажатии checkbox input не срабатывает правило

Ответы (1 шт):