Warum kann ich die Rahmen- und Hintergrundfarbe meines Kontrollkästchens nicht ändern? Für den Selektor kann ich nur einfach zB ändern. Höhe, Breite

Question

HTML:

<div class="first-label-container">  
<label class="label-first label-common"><input type="checkbox" class="check-box" name="check" value="check"/> born in the real world</label> 
</div> 

CSS:

input[type="checkbox"] { 
    width: 16px; // working 
    height: 16px; // working 
    border: 5px solid #4d90cb; // not working 
    border-radius: 5px; // not working 
} 

Answer 1

Ich schlage vor, eine neue Lösung für Sie. Sie müssen sowohl das Element als auch den Stil ändern.

input[type="checkbox"] { 
 
    display: none; 
 
} 
 
input[type="checkbox"]:checked + .label-first:after { 
 
    content: '✔'; 
 
    position: absolute; 
 
    top: 3px; 
 
    left: 4px; 
 
    font-size: 18px; 
 
    line-height: 0.8; 
 
    color: #09ad7e; 
 
    transition: all .2s; 
 
} 
 
.label-first { 
 
    padding-left: 30px; 
 
    position: relative; 
 
} 
 
.label-first:before { 
 
    content: ""; 
 
    display: inline-block; 
 
    width: 20px; 
 
    height: 20px; 
 
    background: red; 
 
    position: absolute; 
 
    left: 0; 
 
    border: 2px solid gray; 
 
}

<div class="first-label-container"> 
 
    <input type="checkbox" class="check-box" name="check" checked id="checkbox" /> 
 
    <label class="label-first label-common" for="checkbox">born in the real world</label> 
 
</div>

Ich hoffe, dass es Ihnen helfen kann.