カスタムチェックボックスのセンタリング

Question

カスタムチェックボックス（span:before）内にCSSチェックマーク（span:after）を縦横に配置しようとしていますが、そのボックスの右に1emの余白を追加していますが、所望の効果を有する。

CSS：

form label { 
    display: inline-block; 
    position: relative; 
    cursor: pointer; 
} 
form label:not(:last-child) { 
    padding-right: 60px; 
} 
form input[type="checkbox"] { 
    display: none; 
} 
form input[type="checkbox"] + span:before { 
    content: ""; 
    display: inline-block; 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    height: 2ex; 
    width: 2ex; 
    background-color: white; 
    border: 1px solid grey; 
    box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.3); 
    margin-right: 3em; 
} 
form input[type="checkbox"]:checked + span { 
    position: relative; 
    cursor: pointer; 
} 
form input[type="checkbox"]:checked + span:after { 
    content: ""; 
    position: absolute; 
    width: 1.2ex; 
    height: 0.4ex; 
    background: transparent; 
    top: 50%; 
    transform: translateY(-50%); 
    left: 0.4ex; 
    border: 3px solid blue; 
    border-top: none; 
    border-right: none; 
    transform: rotate(-45deg); 
} 

デモ：CodePen

ありがとう！

Answer 1

this fiddleを参照してください。

form label { 
    display: inline-block; 
    position: relative; 
    cursor: pointer; 
} 
form label:not(:last-child) { 
    padding-right: 60px; 
} 
form input[type="checkbox"] { 
    display: none; 
} 
form input[type="checkbox"] + span { 
    padding-left: 1em; 
} 
form input[type="checkbox"] + span:before { 
    content: ""; 
    display: inline-block; 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%) translateX(-120%); 
    height: 2ex; 
    width: 2ex; 
    background-color: white; 
    border: 1px solid grey; 
    box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.3); 
    margin-right: 3em; 
} 
form input[type="checkbox"]:checked + span { 
    position: relative; 
    cursor: pointer; 
    display: flex; 
} 
form input[type="checkbox"]:checked + span:after { 
    content: ""; 
    position: absolute; 
    width: 1.2ex; 
    height: 0.4ex; 
    background: transparent; 
    top: 30%; 
    transform: translateY(-250%); 
    left: -0.1ex; 
    border: 3px solid blue; 
    border-top: none; 
    border-right: none; 
    transform: rotate(-45deg); 
} 

Answer 2

これは、おそらく2 -

form label{...}の内側に、私はあなたのコードで

の1-セットright: -30px;を次のものを変更しLink to jsfiddle

変更

探しているものですセットtop: 30%;left: -18px;left: -20px;

form input[type="checkbox"] + span:before {...}内部設定

、4- form input[type="checkbox"]:checked + span:after{...}内部設定

、3- form input[type="checkbox"]:checked + span:after{...}の内側に、あなたもここでそれをテストすることができます。

form label { 
 
    display: inline-block; 
 
    position: relative; 
 
    right: -30px; 
 
    cursor: pointer; 
 
} 
 
form label:not(:last-child) { 
 
    padding-right: 60px; 
 
} 
 
form input[type="checkbox"] { 
 
    display: none; 
 
} 
 
form input[type="checkbox"] + span:before { 
 
    content: ""; 
 
    display: inline-block; 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    height: 2ex; 
 
    width: 2ex; 
 
    background-color: white; 
 
    border: 1px solid grey; 
 
    box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.3); 
 
    margin-right: 3em; 
 
    left: -20px; 
 
    
 
} 
 
form input[type="checkbox"]:checked + span { 
 
    position: relative; 
 
    cursor: pointer; 
 
} 
 
form input[type="checkbox"]:checked + span:after { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 1.2ex; 
 
    height: 0.4ex; 
 
    background: transparent; 
 
    top: 30%; 
 
    transform: translateY(-50%); 
 
    left: -18px; 
 
    border: 3px solid blue; 
 
    border-top: none; 
 
    border-right: none; 
 
    transform: rotate(-45deg); 
 
}

<form action="/" method="post"> 
 
    <label> 
 
<input type="checkbox" name="search-site-filter" value="option1" required> 
 
<span>Checkbox label</span> 
 
    </label> 
 
</form>

Answer 3

あなたはleft: 0に擬似要素を設定し、inputにマージンを設定し、0代わりのdisplay: noneにあるチェックボックスの不透明度を設定することができます。

form label { 
 
    display: inline-block; 
 
    position: relative; 
 
    cursor: pointer; 
 
} 
 
form label:not(:last-child) { 
 
    padding-right: 60px; 
 
} 
 
form input[type="checkbox"] { 
 
    opacity: 0; 
 
    margin-right: 1em; 
 
} 
 
form input[type="checkbox"] + span:before { 
 
    content: ""; 
 
    display: inline-block; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 0; 
 
    transform: translateY(-50%); 
 
    height: 2ex; 
 
    width: 2ex; 
 
    background-color: white; 
 
    border: 1px solid grey; 
 
    box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.3); 
 
    /* margin-right: 3em; */ 
 
} 
 
form input[type="checkbox"]:checked + span { 
 
    cursor: pointer; 
 
} 
 
form input[type="checkbox"]:checked + span:after { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 1.2ex; 
 
    height: 0.4ex; 
 
    background: transparent; 
 
    top: 30%; 
 
    transform: translateY(-50%); 
 
    left: 0.4ex; 
 
    border: 3px solid blue; 
 
    border-top: none; 
 
    border-right: none; 
 
    transform: rotate(-45deg); 
 
}

<form action="/" method="post"> 
 
    <label> 
 
    <input type="checkbox" name="search-site-filter" value="option1" required> 
 
    <span>Checkbox label</span> 
 
    </label> 
 
</form>