選択したときにカスタムチェックボックスがわずかに動く

Question

私のプロジェクトのチェックボックスを他のデザインと一直線になるように変更しましたが、問題があります。

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

 
input[type="checkbox"]+label:before { 
 
    position: relative; 
 
    content: " "; 
 
    display: inline-block; 
 
    width: 22px; 
 
    height: 22px; 
 
    border: 1px solid grey; 
 
    top: 4px; 
 
    margin: 0 10px 0 0; 
 
} 
 

 
input[type="checkbox"]:checked+label:before { 
 
    position: relative; 
 
    content: "✔"; 
 
    display: inline-block; 
 
    width: 22px; 
 
    height: 22px; 
 
    border: 1px solid grey; 
 
    top: 4px; 
 
    margin: 0 10px 0 0; 
 
}

<input type="checkbox" /> 
 
<label>Click to accept</label>

ここでの結果です：

そして、ここでは、私はそれを選択した場合に何が起こるかです：

私は間違って何をしていますか？あなたがする必要がある "移動" 修正するには

Answer 1

：

• は私がbottomを選択しているlabel::beforeにvertical-align: some valueを設定します。

と "✔" を整列する（場合にはそれがない - スニペットはないが）、あなたがする必要があります。

• :checked+label::before
に（ heightと同じ） text-align:centerと line-height:22pxを追加

はまた、私は必要な

注意、重複したプロパティを削除されません：あなたはでfor属性が欠落していますそうでない場合は、あなただけlabel

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

 
input[type="checkbox"]+label::before { 
 
    position: relative; 
 
    content: " "; 
 
    display: inline-block; 
 
    vertical-align: bottom; 
 
    width: 22px; 
 
    height: 22px; 
 
    border: 1px solid grey; 
 
    top: 4px; 
 
    margin: 0 10px 0 0; 
 
} 
 

 
input[type="checkbox"]:checked+label::before { 
 
    content: "✔"; 
 
    text-align: center; 
 
    line-height: 22px; 
 
}

<input id="input" type="checkbox" /> 
 
<label for="input">Click to accept</label>

Answer 2

にあなたはこれを試すことができ、擬似checkboxをクリックすることはできません、これは

input[type="checkbox"] { 
 
     position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    opacity: 0; 
 
    } 
 

 
    input[type="checkbox"] + label:before { 
 
     position: relative; 
 
    content: " "; 
 
    display: inline-block; 
 
    width: 22px; 
 
    height: 22px; 
 
    border: 1px solid grey; 
 
    top: 4px; 
 
    margin: -8px 10px 0 0; 
 
    vertical-align: middle; 
 
    } 
 

 
    input[type="checkbox"]:checked + label:before { 
 
    content: "✔"; 
 
    text-align: center; 
 
    line-height: 22px; 
 
    }

<input type="checkbox"/> 
 
<label>Click to accept</label>

を働いている、入力に idと一致するように

Answer 3

私はラベルにフレックスボックスを使用してアイテムを垂直に整列させました。チェックボックスをオンにしたときにtext-align:centerを追加すると、マーカーが水平にセンタリングされます。

label { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

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

 
input[type="checkbox"]+label:before { 
 
    content: " "; 
 
    display: inline-block; 
 
    width: 22px; 
 
    height: 22px; 
 
    border: 1px solid grey; 
 
    margin-right: 0.5em; 
 
} 
 

 
input[type="checkbox"]:checked+label:before { 
 
    content: "✔"; 
 
    display: inline-block; 
 
    width: 22px; 
 
    height: 22px; 
 
    border: 1px solid grey; 
 
    margin-right: 0.5em; 
 
    text-align: center; 
 
}

<input type="checkbox" id="accept" /> 
 
<label for="accept">Click to accept</label>

Answer 4

あなたはここに別の方法を見ることができます。

実施例以下を参照してください。

/*--CSS--*/ 
 
    
 

 
    
 

 
input[type="checkbox"] { 
 
    -webkit-appearance: none; 
 
    background-color: transparent; 
 
    -webkit-rtl-ordering: logical; 
 
    user-select: text; 
 
    cursor: pointer; 
 
    padding: 1px; 
 
    border-width: 0; 
 
    border-style: inset; 
 
    border-color: initial; 
 
    border-image: initial; 
 
    float: left; 
 
    margin: 0 25px 0 0; 
 
    position: relative; 
 
} 
 
input[type="checkbox"]:after { 
 
    -webkit-transition: all 0.3s ease-in-out; 
 
    -moz-transition: all 0.3s ease-in-out; 
 
    transition: all 0.3s ease-in-out; 
 
    content: ""; 
 
    position: absolute; 
 
    left: 0; 
 
    z-index: 1; 
 
    width: 16px; 
 
    height: 16px; 
 
    border: 1px solid #c0c0c0; 
 
    top:0; 
 
} 
 
\t input[type="checkbox"]:before { 
 
    -webkit-transition: all 0.3s ease-in-out; 
 
    -moz-transition: all 0.3s ease-in-out; 
 
    transition: all 0.3s ease-in-out; 
 
    content: ""; 
 
    position: absolute; 
 
    left: 0; 
 
    z-index: 1; 
 
    width: 16px; 
 
    height: 16px; 
 
    border: 1px solid #c0c0c0; 
 
    top:0; 
 
    opactity:0; 
 
} 
 
    input[type="checkbox"]:checked:before { 
 
    -webkit-transform: rotate(-45deg); 
 
    -moz-transform: rotate(-45deg); 
 
    -ms-transform: rotate(-45deg); 
 
    -o-transform: rotate(-45deg); 
 
    transform: rotate(-45deg); 
 
    height: 5px; 
 
    border-color: #009688; 
 
    border-top-style: none; 
 
    border-right-style: none; 
 
    outline: none; 
 
    opacity: 1; 
 
    width: 12px; 
 
    top: 3px; 
 
    left: 3px; 
 
} 
 
input[type="checkbox"]:focus{outline:0;}

<!--HTML--> 
 
\t <input type="checkbox" /> 
 
\t <label>Click to accept</label>