CSS с DIV флажок, вход не выровнен по центру DIV

Question

У меня есть checkbox, который я использовал в таблицах и других частях своего веб-приложения.

Этот флажок находится внутри DIV, поэтому он имеет приятный внешний вид.

Это как формируется флажок в HTML:

<div class="checkbox checkbox-success checkbox-single"> 
    <input type="checkbox"><label></label> 
</div> 

я обнаружил, что, когда я нажимаю в центре флажка это работает, но если я проверил, как на самом верху слева, справа вверху или внизу слева не работает.

Затем я проверяю элемент в Google chrome и нашел это, когда я выбираю элемент input.

Вот почему это не работает, потому что входной элемент не centerd в дела.

Я использую Bootstrap 3.

Вот CSS, что я могу видеть в хромированных инспекторах Google, когда я выбираю input элемент.

Вот CSS, что я думаю, будут применены из моего Style.css

.checkbox { 
    padding-left: 20px; 
} 
.checkbox label { 
    display: inline-block; 
    padding-left: 5px; 
    position: relative; 
} 
.checkbox label::before { 
    -o-transition: 0.3s ease-in-out; 
    -webkit-transition: 0.3s ease-in-out; 
    background-color: #ffffff; 
    border-radius: 3px; 
    border: 1px solid #cccccc; 
    content: ""; 
    display: inline-block; 
    height: 17px; 
    left: 0; 
    margin-left: -20px; 
    position: absolute; 
    transition: 0.3s ease-in-out; 
    width: 17px; 
    outline: none !important; 
} 
.checkbox input[type="checkbox"] { 
    cursor: pointer; 
    opacity: 0; 
    z-index: 1; 
    outline: none !important; 
} 
.checkbox label::after { 
    color: #555555; 
    display: inline-block; 
    font-size: 11px; 
    height: 16px; 
    left: 0; 
    margin-left: -20px; 
    padding-left: 3px; 
    padding-top: 1px; 
    position: absolute; 
    top: 0; 
    width: 16px; 
} 
.checkbox.checkbox-single label { 
    height: 17px; 
} 
.checkbox-success input[type="checkbox"]:checked + label::before { 
    background-color: #01ba9a; 
    border-color: #01ba9a; 
} 
.checkbox-success input[type="checkbox"]:checked + label::after { 
    color: #ffffff; 
} 

Вот это CodePen образец, не показывают то же самое точное положение, но вы увидите, что вход не с выравниванием по центру.

http://codepen.io/anon/pen/Jbqapo

Это ломает голову, любой ключ?

Answer 1

Добавьте следующий div к .checkbox input[type="checkbox"] селектор, чтобы переопределить самозагрузки без !important с, то следующие свойства CSS:

div.checkbox input[type="checkbox"] { 
    /* add these */ 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 16px; 
    height: 16px; 
    margin: 0; 
} 

сниппетов ниже:

.checkbox { 
 
    padding-left: 20px; 
 
} 
 
.checkbox label { 
 
    display: inline-block; 
 
    padding-left: 5px; 
 
    position: relative; 
 
} 
 
.checkbox label::before { 
 
    -o-transition: 0.3s ease-in-out; 
 
    -webkit-transition: 0.3s ease-in-out; 
 
    background-color: #ffffff; 
 
    border-radius: 3px; 
 
    border: 1px solid #cccccc; 
 
    content: ""; 
 
    display: inline-block; 
 
    height: 17px; 
 
    left: 0; 
 
    margin-left: -20px; 
 
    position: absolute; 
 
    transition: 0.3s ease-in-out; 
 
    width: 17px; 
 
    outline: none !important; 
 
} 
 
div.checkbox input[type="checkbox"] { 
 
    cursor: pointer; 
 
    opacity: 0; 
 
    z-index: 1; 
 
    outline: none !important; 
 

 
    /* add these */ 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 16px; 
 
    height: 16px; 
 
    margin: 0; 
 
} 
 
.checkbox label::after { 
 
    color: #555555; 
 
    display: inline-block; 
 
    font-size: 11px; 
 
    height: 16px; 
 
    left: 0; 
 
    margin-left: -20px; 
 
    padding-left: 3px; 
 
    padding-top: 1px; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 16px; 
 
} 
 
.checkbox.checkbox-single label { 
 
    height: 17px; 
 
} 
 
.checkbox-success input[type="checkbox"]:checked + label::before { 
 
    background-color: #01ba9a; 
 
    border-color: #01ba9a; 
 
} 
 
.checkbox-success input[type="checkbox"]:checked + label::after { 
 
    color: #ffffff; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="checkbox checkbox-success checkbox-single"> 
 
    <input type="checkbox"> 
 
    <label></label> 
 
</div>

Это это будет охватывать все, что содержит пространство div.