пользовательский стиль для флажка с надписью

Question

Я пытаюсь создать собственный стиль для флажка. Он работает нормально, пока я не разместил input в пределах label.

Кто-нибудь знает, как заставить CSS работать?

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

Поскольку у вас есть <p> внутри наклейке, прямо рядом с input вы можете использовать, чтобы применить pseudo -элементные вместо:

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

CSS-код input + label. + - это смежный селектор sibling https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors Таким образом, он нацелен на label, который поступает непосредственно после input.

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>