Создал кастомный чекбокс, чтобы при его нажатии появлялся другой блок. Для появляющегося блока выставлено значение 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>