CSS：枠線付きのチェックボックス。境界とコンテンツの間のスペースを取得する方法

Question

私はチェックボックスがあります。

<div class="row margin-top-15"> 
    <div class="col-md-12"> 
     <div class="checkbox_square"> 
      <input id="check_password_show" type="checkbox" value=""></input> 
      <label for="check_password_show"></label> 
     </div> 
     <p th:text="#{label.common_password_show}"></p> 
    </div> 
</div> 

を、私はカスタムのチェックボックススタイルを作成：選択し

とその：それは今、その選択されていないように見えます

input[type=checkbox] { 
    visibility: hidden; 
} 

.checkbox_square { 
    position: relative; 
} 

.checkbox_square label { 
    cursor: pointer; 
    position: absolute; 
    width: 20px; 
    height: 20px; 
    left: 0px; 
    border-radius: 3px; 
    border: 2px solid var(--textcolorsecundary); 
} 

.checkbox_square label:after { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
    opacity: 0; 
    content: ''; 
    position: absolute; 
    left: -2px; 
    top: -2px; 
    right: -2px; 
    bottom: -2px; 
    background: var(--diagramGreenColor); 
    border-radius: 3px; 
    border: 2px solid var(--primaryColor); 
} 

.checkbox_square label:hover::after { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; 
    filter: alpha(opacity=30); 
    opacity: 0.3; 
} 

.checkbox_square input[type=checkbox]:checked + label:after { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
    filter: alpha(opacity=100); 
    opacity: 1; 
} 

を

選択状態が少し違うです。

だから私は必要なもの、緑の背景と青の枠線の間にいくつかの領域である：私はそれは次のようになりたいです。それはどういうわけか可能ですか？

jsFiddleを作成してチェックボックスを表示しようとしましたが、確認できるように、チェックボックスはjsFiddleには表示されません。私のIDEとブラウザで正常に動作しています。

Answer 1

.checkbox_square label:afterの位置を調整して、目的の効果を達成することができます。以下の例を確認してください。

input[type=checkbox] { 
 
    visibility: hidden; 
 
} 
 
.checkbox_square { 
 
    position: relative; 
 
} 
 
.checkbox_square label { 
 
    cursor: pointer; 
 
    position: absolute; 
 
    width: 20px; 
 
    height: 20px; 
 
    left: 0px; 
 
    border-radius: 3px; 
 
    border: 2px solid grey; 
 
} 
 
.checkbox_square label:after { 
 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    content: ''; 
 
    position: absolute; 
 
    left: 2px; 
 
    top: 2px; 
 
    right: 2px; 
 
    bottom: 2px; 
 
    background: green; 
 
    border-radius: 3px; 
 
} 
 
.checkbox_square label:hover::after { 
 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; 
 
    filter: alpha(opacity=30); 
 
    opacity: 0.3; 
 
} 
 
.checkbox_square input[type=checkbox]:checked + label:after { 
 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
 
    filter: alpha(opacity=100); 
 
    opacity: 1; 
 
} 
 
.checkbox_square input[type=checkbox]:checked + label { 
 
    border-color: blue; 
 
}

<div class="row margin-top-15"> 
 
    <div class="col-md-12"> 
 
    <div class="checkbox_square"> 
 
     <input id="check_password_show" type="checkbox" value="" /> 
 
     <label for="check_password_show"></label> 
 
    </div> 
 
    <p th:text="#{label.common_password_show}"></p> 
 
    </div> 
 
</div>