Zentrieren Sie ein Häkchen/Häkchen in einem benutzerdefinierten Kontrollkästchen

Question

Ich baue ein benutzerdefiniertes Kontrollkästchen, die Funktionalität ist fast da, aber das Styling hat einen Weg zu gehen.

Ich habe ein paar Probleme,

1. Ich brauche die innerhalb des Kreises zentriert Scheck
2. ich den Scheck müssen nur auf Klick auf die Checkbox, selbst nicht der Text aktiv sein.

Im Angst, ich kann die Prüfung zum Zentrum scheinen, ohne Position links mit Polsterung links.

HTML

<label for='product-45-45'> 
    <input type='checkbox' style="float:left;" id='product-45-45' /> 
    <div class="accord-text"> 
    <strong>header:</strong> sub text 
    <strong>more text!</strong> 
    </div> 
</label> 

CSS

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

input[type=checkbox] + .accord-text:before { 
    width: 30px; 
    height: 30px; 
    border-radius: 200%; 
    background-color: #d6e4ec; 
    border: 1px solid #000; 
    display: block; 
    font-size: 150%; 
    font-weight: 900; 
    content: ""; 
    color: green; 
} 

input[type=checkbox]:checked + .accord-text:before { 
    display: table; 
    content: "\2713"; 
} 

Answer 1

• Problem 1: text-align: center; wenn Checkbox ic geprüft, und entfernen style="float:left;" aus Checkbox
• Problem 2: Entfernen Sie den Text aus accord-text div und setzen es draußen.

.row{ 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 

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

 
input[type=checkbox] + .accord-text:before { 
 
    width: 30px; 
 
    height: 30px; 
 
    border-radius: 200%; 
 
    background-color: #d6e4ec; 
 
    border: 1px solid #000; 
 
    display: block; 
 
    font-size: 140%; 
 
    font-weight: 900; 
 
    content: ""; 
 
    color: green; 
 
} 
 

 
input[type=checkbox]:checked + .accord-text:before { 
 
    display: table; 
 
    content: "\2713"; 
 
    text-align: center; 
 
}

<div class="row"> 
 
    <label for='product-45-45'> 
 
    <input type='checkbox' style="float:left;" id='product-45-45' /> 
 
    <div class="accord-text"> 
 

 
    </div> 
 
</label> 
 

 
    <strong>header:</strong> sub text 
 
    <strong>more text!</strong> 
 
</div>

Answer 2

Sie müssen den Inline-Code entfernen, die den Eingang des Styling schweben gelassen, man kann es nicht zentrieren, während die Schwimmer auf ist . Dann fügen Sie margin: 0 auto es zum Zentrum:

input[type=checkbox]:checked { 
    float: none; 
} 

input[type=checkbox] + .accord-text:before { 
    margin: 0 auto; 
    width: 30px; 
    height: 30px; 
    border-radius: 200%; 
    background-color: #d6e4ec; 
    border: 1px solid #000; 
    display: block; 
    font-size: 150%; 
    font-weight: 900; 
    content: ""; 
    color: green; 
} 

Answer 3

prüfen dieses Schnipsel auch ich die Höhe Problem behoben haben, als wir eincheckten,

hinzufügen display:block und max-height dieser input[type=checkbox]:checked + .accord-text:before

input[type=checkbox] { 
 
    display: none; 
 
} 
 
label { 
 
float:left; 
 
} 
 
input[type=checkbox] + .accord-text:before { 
 
    width: 30px; 
 
    height: 30px; 
 
    border-radius: 200%; 
 
    background-color: #d6e4ec; 
 
    border: 1px solid #000; 
 
    display: block; 
 
    font-size: 150%; 
 
    font-weight: 900; 
 
    content: ""; 
 
    color: green; 
 
    text-align:center; 
 
    max-height:30px; 
 
} 
 

 
input[type=checkbox]:checked + .accord-text:before { 
 
    display: table; 
 
    content: "\2713"; 
 
    max-height:30px; 
 
    display:block; 
 
} 
 
span { 
 
float:left; 
 
padding-left:5px; 
 
}

<label for='product-45-45'> 
 
    <input type='checkbox' style="float:left;" id='product-45-45' /> 
 
    <div class="accord-text"></div> 
 
</label> 
 
<span><strong>header:</strong> sub text 
 
    <strong>more text!</strong> 
 
</span>