Estou modificando inputs checkbox
escondendo-os e chamando labels
para receber a função de checked
.
Como poderão ver no FIDDLE e também nos códigos demonstrados abaixo, ao clicar em ordem crescente, o efeito é atribuído todos os checkeds
que estão em seguida do clicado.
Porém, o que pude observar enviando $_POST
do formulário, é que por mais que o efeito CSS
tenha sido atribuído, os inputs não se tornam checkeds
, então é um erro de lógica no CSS
.
Como deixar os efeitos de
label
independentes e remover este erro de lógica do código css?
.hidden { display:none }
#checkboxes input[type="checkbox"].drm ~ label {
float: left;
cursor: pointer;
vertical-align: middle;
margin: 0px 2px 0px 8px;
width: 37px;
line-height: 37px;
text-align: center;
border: 1px #898989 solid;
background-color: #FFF;
color: #3F3F41;
font-size: 13px;
text-transform: uppercase;
}
#checkboxes input[type="checkbox"].drm ~ label:hover {
border:1px #052245 solid;
background-color:#052245;
color:#FFF;
}
#checkboxes input[type="checkbox"]:checked.drm ~ label {
border:1px #052245 solid;
background-color:#052245;
color:#FFF;
}
<div id="checkboxes" class="checkboxes ajuste-checkboxes floatright">
<input id="dorm1" class="hidden drm" type="checkbox" name="dorms[]" value="1">
<label for="dorm1" class="montserrat fs-16">1</label>
<input id="dorm2" class="hidden drm" type="checkbox" name="dorms[]" value="2">
<label for="dorm2" class="montserrat fs-16">2</label>
<input id="dorm3" class="hidden drm" type="checkbox" name="dorms[]" value="3+">
<label for="dorm3" class="montserrat fs-16">3+</label>
</div>