dimanche 21 janvier 2018

Why does input type checkbox act differently when it's checked?

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