Есть несколько чекбоксов и к каждому свой инпут, инпут должен скрываться и отображаться по чекбоксу, может кто подсказать красивое решение?
.conditions_check input[type="checkbox"]+label {
height: 1.25vw;
width: 1.25vw;
display: inline-block;
cursor: pointer;
border: 0.125vw #815eca solid;
border-radius: .7vw;
margin-top: 0.625vw;
margin-right: 0.5vw;
position: relative;
top: 0;
left: 0;
}
.conditions_check input[type="checkbox"]+label::before {
content: "";
display: inline-block;
height: 1.25vw;
width: 1.25vw;
margin: 0 0.05vw 0 0;
background-repeat: no-repeat;
left: 0;
top: 0.3vw;
}
.conditions_check input[type="checkbox"]:checked+label::before {
background-image: url('img/check_tablink.png');
background-position: -2.6vw -0.4vw;
}
.conditions_check {
display: inline-block;
height: 2.5vw;
width: 44vw;
box-shadow: 0 0.0625vw 0.125vw rgba(0, 0, 0, .2);
border-radius: 0.5vw;
color: #170738;
padding-left: 1vw;
margin-top: 1vw;
}
<div class="conditions_check">
<input id="conditions_check_telega1" type="checkbox" checkbox hidden>
<label for="conditions_check_telega1"></label>
<span>The user must be subscribed to the chanal</span>
</div>
<div class="conditions_input">
<input type="text">
</div>
<div class="conditions_check">
<input id="conditions_check_telega2" type="checkbox" checkbox hidden>
<label for="conditions_check_telega2"></label>
<span>The user must have at least X subscribers</span>
</div>
<div class="conditions_input">
<input type="text">
</div>
<div class="conditions_check">
<input id="conditions_check_telega3" type="checkbox" checkbox hidden>
<label for="conditions_check_telega3"></label>
<span>The user should repost a tweet with a hashtag</span>
</div>
<div class="conditions_input">
<input type="text">
</div>