Центр проверки/отметки в пользовательском флажке

Question

Я создаю пользовательский флажок, функциональность почти там, но стиль имеет способ пойти.

У меня есть несколько проблем,

1. мне нужен чек по центру внутри круга
2. мне нужно только проверить, чтобы быть активным щелчком самого флажка не текст в.

Я испугался, что я наклоняю, похоже, чтобы проверить центр, не используя проставку слева от положения слева.

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

• Проблема 1: text-align: center; когда флажок IC проверил, и удалить style="float:left;" с флажком
• Задача 2: Удалите текст из accord-text DIV и поместить его снаружи.

.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

Вы должны удалить встроенный код, который стилизации вход для поплавка влево, вы не можете центрировать его в то время как поплавок на , Затем добавить поле: 0 авто центрировать его:

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

Проверить этот фрагмент также я исправили проблему высоты, когда мы проверили,

Добавить display:block и max-height к этому 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>