带有DIV复选框的CSS，输入没有对齐DIV的中心

Question

我有一个checkbox，我在我的web应用程序的表格和其他部分使用了checkbox。

此复选框位于DIV之内，因此它具有更好的外观和感觉。

这是如何形成HTML复选框：

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

我已经发现，当我在它工作的复选框的中心，但如果点击我检查像极顶左，右上或左下不起作用。

然后我检查Google chrome中的元素，并在选择input元素时找到了这个元素。

这就是为什么它不工作，因为在输入元素不centerd到div。

我使用的引导3.

这里是CSS，我可以在谷歌Chrome检查看到，当我选择input元素。

这里是我猜是从我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; 
} 

这里applyed是一个CodePen样品CSS，没有表现出同样的确切位置，但你会看到，输入不居中对齐。

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

这是打破我的头，什么线索？

Answer 1

添加以下div到.checkbox input[type="checkbox"]选择，以引导覆盖无!important s，则下面的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的空间。