DIVチェックボックス付きCSS、入力がDIVの中央に揃えられていない

Question

私はウェブアプリケーションのテーブルやその他の部分で使用したcheckboxを持っています。

このチェックボックスはDIVの内部にあるので、より見た目がよくなります。

これは、チェックボックスがHTMLに形成される方法である。

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

私はそれが動作チェックボックスの中央にクリックしたときにことが、私は非常に上のようにチェックすると検出されました左、右上、左下のいずれにも動作しません。

次に、Google chromeの要素を調べて、input要素を選択したときにこれを検出しました。入力要素はdiv要素にcenterdされていないので、それは働いていない理由です

。私はここで

ブートストラップ3を使用してい

は

私はinput要素を選択したときに、私はGoogleのクロムインスペクタで見ることができます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; 
} 

からapplyedさCSSがCodePenサンプルであり、同じ正確な位置を示していないが、あなたは入力がないことがわかります中心に位置合わせされる。

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

これは、任意の手掛かりを私の頭を壊していますか？

Answer 1

次のCSSプロパティ、!important Sなしでブートストラップを無効にするために、次のdiv.checkbox input[type="checkbox"]にセレクタを追加します。以下

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スペースを含むすべてをカバーします。