Benutzerdefinierte Kontrollkästchen bewegen sich leicht, wenn ausgewählt

Question

Ich habe die Kontrollkästchen in meinem Projekt geändert, um besser auf den Rest des Designs ausgerichtet zu sein, aber ich habe ein Problem: Bei jeder Markierung wird die Beschriftung des Kontrollkästchens leicht verschoben.

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

 
input[type="checkbox"]+label:before { 
 
    position: relative; 
 
    content: " "; 
 
    display: inline-block; 
 
    width: 22px; 
 
    height: 22px; 
 
    border: 1px solid grey; 
 
    top: 4px; 
 
    margin: 0 10px 0 0; 
 
} 
 

 
input[type="checkbox"]:checked+label:before { 
 
    position: relative; 
 
    content: "✔"; 
 
    display: inline-block; 
 
    width: 22px; 
 
    height: 22px; 
 
    border: 1px solid grey; 
 
    top: 4px; 
 
    margin: 0 10px 0 0; 
 
}

<input type="checkbox" /> 
 
<label>Click to accept</label>

Hier ist das Ergebnis:

Und hier ist das, was passiert, wenn ich es wählen:

Was mache ich falsch?

Answer 1

die "bewegte" Sie beheben müssen:

• vertical-align: some value in label::before gesetzt habe ich bottom wählen.

und die "✔" auszurichten (falls dies nicht der Fall - Schnipsel nicht), müssen Sie:

• hinzufügen text-align:center und line-height:22px (gleiche wie die height) in :checked+label::before

auch entfernte ich duplizierten Eigenschaften, nicht notwendig

Hinweis: Sie fehlt das for Attribut in labelid in Eingang übereinstimmen, sonst kann man nicht in der Pseudo klicken checkbox, nur in der label

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

 
input[type="checkbox"]+label::before { 
 
    position: relative; 
 
    content: " "; 
 
    display: inline-block; 
 
    vertical-align: bottom; 
 
    width: 22px; 
 
    height: 22px; 
 
    border: 1px solid grey; 
 
    top: 4px; 
 
    margin: 0 10px 0 0; 
 
} 
 

 
input[type="checkbox"]:checked+label::before { 
 
    content: "✔"; 
 
    text-align: center; 
 
    line-height: 22px; 
 
}

<input id="input" type="checkbox" /> 
 
<label for="input">Click to accept</label>

Answer 2

Sie können dies versuchen, das funktioniert

input[type="checkbox"] { 
 
     position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    opacity: 0; 
 
    } 
 

 
    input[type="checkbox"] + label:before { 
 
     position: relative; 
 
    content: " "; 
 
    display: inline-block; 
 
    width: 22px; 
 
    height: 22px; 
 
    border: 1px solid grey; 
 
    top: 4px; 
 
    margin: -8px 10px 0 0; 
 
    vertical-align: middle; 
 
    } 
 

 
    input[type="checkbox"]:checked + label:before { 
 
    content: "✔"; 
 
    text-align: center; 
 
    line-height: 22px; 
 
    }

<input type="checkbox"/> 
 
<label>Click to accept</label>

Answer 3

Ich habe eine Flexbox für das Etikett verwendet, um die Objekte vertikal auszurichten. Das Hinzufügen von text-align:center, wenn das Kontrollkästchen aktiviert ist, stellt sicher, dass der Marker horizontal zentriert ist.

label { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

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

 
input[type="checkbox"]+label:before { 
 
    content: " "; 
 
    display: inline-block; 
 
    width: 22px; 
 
    height: 22px; 
 
    border: 1px solid grey; 
 
    margin-right: 0.5em; 
 
} 
 

 
input[type="checkbox"]:checked+label:before { 
 
    content: "✔"; 
 
    display: inline-block; 
 
    width: 22px; 
 
    height: 22px; 
 
    border: 1px solid grey; 
 
    margin-right: 0.5em; 
 
    text-align: center; 
 
}

<input type="checkbox" id="accept" /> 
 
<label for="accept">Click to accept</label>

Answer 4

Sie hier eine andere Art und Weise sehen.

siehe unten Arbeitsbeispiel:

/*--CSS--*/ 
 
    
 

 
    
 

 
input[type="checkbox"] { 
 
    -webkit-appearance: none; 
 
    background-color: transparent; 
 
    -webkit-rtl-ordering: logical; 
 
    user-select: text; 
 
    cursor: pointer; 
 
    padding: 1px; 
 
    border-width: 0; 
 
    border-style: inset; 
 
    border-color: initial; 
 
    border-image: initial; 
 
    float: left; 
 
    margin: 0 25px 0 0; 
 
    position: relative; 
 
} 
 
input[type="checkbox"]:after { 
 
    -webkit-transition: all 0.3s ease-in-out; 
 
    -moz-transition: all 0.3s ease-in-out; 
 
    transition: all 0.3s ease-in-out; 
 
    content: ""; 
 
    position: absolute; 
 
    left: 0; 
 
    z-index: 1; 
 
    width: 16px; 
 
    height: 16px; 
 
    border: 1px solid #c0c0c0; 
 
    top:0; 
 
} 
 
\t input[type="checkbox"]:before { 
 
    -webkit-transition: all 0.3s ease-in-out; 
 
    -moz-transition: all 0.3s ease-in-out; 
 
    transition: all 0.3s ease-in-out; 
 
    content: ""; 
 
    position: absolute; 
 
    left: 0; 
 
    z-index: 1; 
 
    width: 16px; 
 
    height: 16px; 
 
    border: 1px solid #c0c0c0; 
 
    top:0; 
 
    opactity:0; 
 
} 
 
    input[type="checkbox"]:checked:before { 
 
    -webkit-transform: rotate(-45deg); 
 
    -moz-transform: rotate(-45deg); 
 
    -ms-transform: rotate(-45deg); 
 
    -o-transform: rotate(-45deg); 
 
    transform: rotate(-45deg); 
 
    height: 5px; 
 
    border-color: #009688; 
 
    border-top-style: none; 
 
    border-right-style: none; 
 
    outline: none; 
 
    opacity: 1; 
 
    width: 12px; 
 
    top: 3px; 
 
    left: 3px; 
 
} 
 
input[type="checkbox"]:focus{outline:0;}

<!--HTML--> 
 
\t <input type="checkbox" /> 
 
\t <label>Click to accept</label>