Wie erstelle ich ein Häkchen in einem benutzerdefinierten Kontrollkästchen?

Question

Ich möchte ein benutzerdefiniertes Kontrollkästchen mit CSS machen, aber nicht sicher, wie es geht.

.custom-checkbox { 
 
    border: 3px solid #7e8a94; 
 
    float: right; 
 
    height: 20px; 
 
    width: 20px; 
 
    border-radius: 5px; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
} 
 

 
.custom-checkbox.hover { 
 
    border: 3px solid #43D8B0; 
 
} 
 

 
.custom-checkbox.active { 
 
    border: 3px solid #43D8B0; 
 
} 
 

 
.custom-checkbox.active.checkmark {}

<input type='checkbox' class='checkbox'> 
 
<div class="custom-checkbox"> 
 
    <div class="checkmark"></div> 
 
</div>

Ich habe active Klasse custom-checkbox bei der Kontrolle, aber nicht sicher, wie eine Zecke in einem Feld dann zu schaffen?

Answer 1

Sie müssen Ihre input & manuell um eine label auf eine Art und Weise mit Pseudo-Elementen anpassen, um den gewünschten Effekt in der Checkbox, die Sie hier möchten, zu erhalten.

Sie können auch content: '✔'; in Ihrem css verwenden, um ein Häkchen bei Klick bereitzustellen.

Ich baute man eine Demo zu finden, überprüfen Sie den folgenden Code ein:

[type="checkbox"]:not(:checked), 
 
[type="checkbox"]:checked { 
 
    position: absolute; 
 
    left: -9999px; 
 
} 
 

 
[type="checkbox"]:not(:checked)+label, 
 
[type="checkbox"]:checked+label { 
 
    position: relative; 
 
    padding-left: 25px; 
 
    cursor: pointer; 
 
} 
 

 
[type="checkbox"]:not(:checked)+label:before, 
 
[type="checkbox"]:checked+label:before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    top: -5px; 
 
    width: 40px; 
 
    height: 40px; 
 
    background: #fff; 
 
    border-radius: 3px; 
 
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1); 
 
    border-radius: 50%; 
 
    background-color: #5cf1b3; 
 
    outline: none; 
 
} 
 

 
[type="checkbox"]:not(:checked)+label:after, 
 
[type="checkbox"]:checked+label:after { 
 
    content: '✔'; 
 
    position: absolute; 
 
    top: 8px; 
 
    left: 10px; 
 
    font-size: 24px; 
 
    line-height: 0.8; 
 
    color: #fff; 
 
    transition: all .2s; 
 
} 
 

 
[type="checkbox"]:not(:checked)+label:after { 
 
    opacity: 0; 
 
    transform: scale(0); 
 
} 
 

 
[type="checkbox"]:checked+label:after { 
 
    opacity: 1; 
 
    transform: scale(1); 
 
}

<p> 
 
    <input type="checkbox" id="test1" /> 
 
    <label for="test1"></label> 
 
</p>

Answer 2

Sie benutzerdefinierte checkbox in unterschiedlich verschiedene Zustände unter Schnipsel überprüfen

/* Base for label styling */ 
 
[type="checkbox"]:not(:checked), 
 
[type="checkbox"]:checked { 
 
    position: absolute; 
 
    left: -9999px; 
 
} 
 
[type="checkbox"]:not(:checked) + label, 
 
[type="checkbox"]:checked + label { 
 
    position: relative; 
 
    padding-left: 1.95em; 
 
    cursor: pointer; 
 
} 
 

 
/* checkbox aspect */ 
 
[type="checkbox"]:not(:checked) + label:before, 
 
[type="checkbox"]:checked + label:before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; top: 0; 
 
    width: 1.25em; height: 1.25em; 
 
    border: 2px solid #ccc; 
 
    background: #fff; 
 
    border-radius: 4px; 
 
    box-shadow: inset 0 1px 3px rgba(0,0,0,.1); 
 
} 
 
/* checked mark aspect */ 
 
[type="checkbox"]:not(:checked) + label:after, 
 
[type="checkbox"]:checked + label:after { 
 
    content: '✔'; 
 
    position: absolute; 
 
    top: .1em; left: .3em; 
 
    font-size: 1.3em; 
 
    line-height: 0.8; 
 
    color: #09ad7e; 
 
    transition: all .2s; 
 
} 
 
/* checked mark aspect changes */ 
 
[type="checkbox"]:not(:checked) + label:after { 
 
    opacity: 0; 
 
    transform: scale(0); 
 
} 
 
[type="checkbox"]:checked + label:after { 
 
    opacity: 1; 
 
    transform: scale(1); 
 
} 
 
/* disabled checkbox */ 
 
[type="checkbox"]:disabled:not(:checked) + label:before, 
 
[type="checkbox"]:disabled:checked + label:before { 
 
    box-shadow: none; 
 
    border-color: #bbb; 
 
    background-color: #ddd; 
 
} 
 
[type="checkbox"]:disabled:checked + label:after { 
 
    color: #999; 
 
} 
 
[type="checkbox"]:disabled + label { 
 
    color: #aaa; 
 
} 
 
/* accessibility */ 
 
[type="checkbox"]:checked:focus + label:before, 
 
[type="checkbox"]:not(:checked):focus + label:before { 
 
    border: 2px dotted blue; 
 
} 
 

 
/* hover style just for information */ 
 
label:hover:before { 
 
    border: 2px solid #4778d9!important; 
 
}

<p> 
 
    <input type="checkbox" id="test1" /> 
 
    <label for="test1">Red</label> 
 
    </p> 
 
    <p> 
 
    <input type="checkbox" id="test2" checked="checked" /> 
 
    <label for="test2">Yellow</label> 
 
    </p> 
 
    <p> 
 
    <input type="checkbox" id="test3" checked="checked" disabled="disabled" /> 
 
    <label for="test3">Green</label> 
 
    </p> 
 
    <p> 
 
     <input type="checkbox" id="test4" disabled="disabled" /> 
 
     <label for="test4">Brown</label> 
 
    </p>

Answer 3

Sie müssen :checked Pseudoklasse dafür verwenden. Im folgenden Beispiel wird ein span -Tag verwendet, um den benutzerdefinierten Kontrollkästchenstil zu erstellen und ein Pseudoelement :before mit einem Sonderzeichen ✔ innerhalb des Ticks zu verwenden.

.custom-checkbox input { 
 
    display: none; 
 
} 
 

 
.custom-checkbox span { 
 
    border: 3px solid #7e8a94; 
 
    float: right; 
 
    height: 20px; 
 
    width: 20px; 
 
    border-radius: 5px; 
 
    cursor: pointer; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.custom-checkbox:hover span, 
 
.custom-checkbox input:checked + span { 
 
    border: 3px solid #43D8B0; 
 
} 
 

 
.custom-checkbox input:checked + span:before { 
 
    content: "✔"; 
 
}

<label class="custom-checkbox"> 
 
    <input type="checkbox"> 
 
    <span></span> 
 
</label>