My input type = "checkbox" acts differently when it's checked, it only works for one element for the first input type="checkbox", however for other inputs it works incorrectly.
input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 16px;
height: 16px;
background-color: #fff;
border: 1px solid #cccccc;
cursor: pointer;
transition: 0.3s;
}
input[type="checkbox"]:checked {
background-color: #d9a83f;
}
<div class="first_body">
<input type="checkbox" id="checkbox__id" class="checkbox regular_checkbox" value="value" />
<label for="checkbox__id">Европейская</label>
</div>
<div class="last_body">
<div class="last_body_child">
<input type="checkbox" id="checkbox__id" class="checkbox regular_checkbox" value="value" />
<label for="checkbox__id">Италия</label>
</div>
<div class="last_body_child">
<input type="checkbox" class="checkbox regular_checkbox" />
<label for="checkbox__id">Франция</label>
</div>
</div>
When you click other, only first element with input type="checkbox" is checked, even though you clicking other inputs. Each separate input should be highlighted separately.
How can I solve this ?
<div class="first_body">
<input type="checkbox" id="checkbox__id" class="checkbox regular_checkbox" value="value" />
<label for="checkbox__id">Европейская</label>
</div>
<div class="last_body">
<div class="last_body_child">
<input type="checkbox" id="checkbox__id" class="checkbox regular_checkbox" value="value" />
<label for="checkbox__id">Италия</label>
</div>
<div class="last_body_child">
<input type="checkbox" class="checkbox regular_checkbox" />
<label for="checkbox__id">Франция</label>
</div>
</div>
And this is my styles
input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 16px;
height: 16px;
background-color: #fff;
border: 1px solid #cccccc;
cursor: pointer;
transition: 0.3s;
}
input[type="checkbox"]:checked {
background-color: #d9a83f;
}
Aucun commentaire:
Enregistrer un commentaire