styled checkbox does not show check - with another class

Question

I have an Issue that I tried to set a styled checkbox with a new class, so that this checkbox appears with a different layout than the "original" styled one.

The original looks like this:

   <label for="bauherr_check">Bauherr</label>
   <input id="bauherr_check" name="zielgruppen_check[]" value="bauherr_check" type="checkbox">
   <label class="checkbox" for="bauherr_check">
    ::before
   </label>

The CSS for the "original" code:

input[type=checkbox] {
    display:none;
}

.checkbox:before {
    content: "";
    width: 12px;
    height: 12px;
    display: flex;
    align-items: center;
    background-color: #ffffff;
    border-top: 1px solid #AAAAAA;
    border-left: 1px solid #AAAAAA;
    border-radius: 1px;
}

input[type=checkbox]:checked + .checkbox:before  {
    content: "\2713";
    color:black;
    font-size: 11pt;
}

The new one has the following code

<label class="label_details" for="sichtbar_check">Sichtbar?</label>
<input class="togglerIn" id="sichtbar_check" name="sockel_check[]" value="sichtbar_check" type="checkbox">
<label class="checkbox_details" for="sichtbar_check">
::before
</label>

The CSS of the new Box:

.checkbox_details:before {
content: "";
width: 12px;
height: 12px;
display: flex;
align-items: center;
background-color: #ffffff;
border-top: 1px solid #AAAAAA;
border-left: 1px solid #AAAAAA;
border-radius: 1px;
margin-left:-5px;
}
input[type=checkbox].check_details:checked + .checkbox_details:before  {
    content: "\2713";
    color:black;
    font-size: 11pt;
}

How comes that the second box does not show the check symbol (content) as soon as I check the box? Maybe someone can help? Thanks a lot.

Answer 1

I have found the solution myself... pretty quick though.... I just added a new class to the input field:

<input class="togglerIn" id="sichtbar_check" name="sockel_check[]" value="sichtbar_check" type="checkbox">

And styled the new class the same way than the "orignal" class:

input[type=checkbox]:checked + .checkbox:before, .check_details:checked + .checkbox_details:before {
    content: "\2713";
    color:black;
    font-size: 11pt;
}

This way, the content appears as soon as I check the box.