benutzerdefinierte Styling für Kontrollkästchen mit Eingabe in Etikett

Question

Ich versuche, einen benutzerdefinierten Stil für ein Kontrollkästchen zu erstellen. Es funktioniert normal, bis ich die input innerhalb der label platzieren.

Kann jemand das CSS arbeiten?

input[type=checkbox] { /* to hide the checkbox itself */ 
 
    display:none; 
 
} 
 
input[type=checkbox] + label:before { 
 
    color:green; 
 
    display: inline-block; 
 
} 
 

 
input[type=checkbox] + label:before { /* unchecked icon */ 
 
    content: ""; 
 
} 
 
input[type=checkbox] + label:before { /* space between checkbox and label */ 
 
    letter-spacing: 10px; 
 
} 
 
    
 
input[type=checkbox]:checked + label:before { /* checked icon */ 
 
    content: "✔"; 
 
} 
 
input[type=checkbox]:checked + label:before { /* allow space for check mark */ 
 
    letter-spacing: 5px; 
 
}

<label for="c2"> 
 
    <input type="checkbox" id="c2" name="cc" /> 
 
    <p>hello</p> 
 
</label>

Answer 1

Da haben Sie eine <p> in Ihrem Etikett, direkt neben der input Sie können das verwenden, um die pseudo -elementigen anzuwenden statt:

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

 
input[type=checkbox] + p:before { 
 
    display: block; 
 
    content: ""; 
 
    width: 18px; 
 
    height: 18px; 
 
    color: green; 
 
    letter-spacing: 10px; 
 
    margin-bottom: 18px; 
 
    vertical-align: top; 
 
} 
 

 
input[type=checkbox]:checked + p:before { 
 
    content: "✔"; 
 
} 
 

 
input[type=checkbox]:checked + p:before { 
 
    letter-spacing: 5px; 
 
}

<label for="c3"> 
 
    <input type="checkbox" id="c3" name="cc" /> 
 
    <p>hello</p> 
 
</label>

Answer 2

Die CSS verweist input + label. + ist der benachbarte Geschwister Selektor https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors Das bedeutet also, es zielt auf eine label, die direkt nach einem input kommt.

input[type=checkbox] { 
 
    display: none; 
 
} 
 
/* to hide the checkbox itself */ 
 
input[type=checkbox] + label:before { 
 
    color: green; 
 
    display: inline-block; 
 
} 
 
input[type=checkbox] + label:before { 
 
    content: ""; 
 
} 
 
/* unchecked icon */ 
 
input[type=checkbox] + label:before { 
 
    letter-spacing: 10px; 
 
} 
 
/* space between checkbox and label */ 
 
input[type=checkbox]:checked + label:before { 
 
    content: "✔"; 
 
} 
 
/* checked icon */ 
 
input[type=checkbox]:checked + label:before { 
 
    letter-spacing: 5px; 
 
} 
 
/* allow space for check mark */

<input type="checkbox" id="c2" name="cc" /> 
 
<label for="c2">hello</label>