チェックボックスCSSでスタイル、それは文句を言わない私は、このCSSでスタイルを持つチェックボックスを持っていますが、私はオフカントこのCSSを使用したら、それを再度クリックし

Question

CSS

/* SQUARED THREE */ 
/* SQUARED THREE */ 
.squaredThree { 
    width: 20px;  
    margin: 20px auto; 
    position: relative; 
} 

.squaredThree label { 
    cursor: pointer; 
    position: absolute; 
    width: 20px; 
    height: 20px; 
    top: 0; 
    border-radius: 4px; 

    -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4); 
    -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4); 
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4); 

    background: -webkit-linear-gradient(top, #222 0%, #45484d 100%); 
    background: -moz-linear-gradient(top, #222 0%, #45484d 100%); 
    background: -o-linear-gradient(top, #222 0%, #45484d 100%); 
    background: -ms-linear-gradient(top, #222 0%, #45484d 100%); 
    background: linear-gradient(top, #222 0%, #45484d 100%); 

} 

.squaredThree label:after { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
    opacity: 0; 
    content: ''; 
    position: absolute; 
    width: 9px; 
    height: 5px; 
    background: transparent; 
    top: 4px; 
    left: 4px; 
    border: 3px solid #fcfff4; 
    border-top: none; 
    border-right: none; 

    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
} 

.squaredThree label:hover::after { 
    opacity: 0.3; 
} 

.squaredThree input[type=checkbox]:checked + label:after { 
    opacity: 1; 
} 

work.c。私はcheckboxを常に設定したいと思っていました。私はこのCSSでオンとオフを作るつもりですか？

何がCSSに間違っていますか？

fiddle

Answer 1

いいえ、彼はしません。ここでは、作業フィドルです：https://jsfiddle.net/Tedeee/zxqj7bcb：https://jsfiddle.net/zxqj7bcb/2/

は<label>でfor=がここ<input>

/* SQUARED THREE */ 
 
.squaredThree { 
 
\t width: 20px; \t 
 
\t margin: 20px auto; 
 
\t position: relative; 
 
} 
 

 
.squaredThree label { 
 
\t cursor: pointer; 
 
\t position: absolute; 
 
\t width: 20px; 
 
\t height: 20px; 
 
\t top: 0; 
 
\t border-radius: 4px; 
 

 
\t -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4); 
 
\t -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4); 
 
\t box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4); 
 

 
\t background: -webkit-linear-gradient(top, #222 0%, #45484d 100%); 
 
\t background: -moz-linear-gradient(top, #222 0%, #45484d 100%); 
 
\t background: -o-linear-gradient(top, #222 0%, #45484d 100%); 
 
\t background: -ms-linear-gradient(top, #222 0%, #45484d 100%); 
 
\t background: linear-gradient(top, #222 0%, #45484d 100%); 
 
\t filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#222', endColorstr='#45484d',GradientType=0); 
 
} 
 

 
.squaredThree label:after { 
 
\t -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
 
\t filter: alpha(opacity=0); 
 
\t opacity: 0; 
 
\t content: ''; 
 
\t position: absolute; 
 
\t width: 9px; 
 
\t height: 5px; 
 
\t background: transparent; 
 
\t top: 4px; 
 
\t left: 4px; 
 
\t border: 3px solid #fcfff4; 
 
\t border-top: none; 
 
\t border-right: none; 
 

 
\t -webkit-transform: rotate(-45deg); 
 
\t -moz-transform: rotate(-45deg); 
 
\t -o-transform: rotate(-45deg); 
 
\t -ms-transform: rotate(-45deg); 
 
\t transform: rotate(-45deg); 
 
} 
 

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

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

<div class="rememberMe__checkBox squaredThree"> 
 
<input type="checkbox" id="loginInput-rememberMe" name="login-rememberme" checked="checked"/> 
 
<label for="loginInput-rememberMe"></label> 
 
<p>Remember me</p> 
 
</div><!-- end rememberme__checkbox -->

Answer 2

あなたはそれを動作させるために、ラベルの上にあなたのチェックボックスを配置する必要があります。

#loginInput-rememberMe { 
    position: relative; 
    opacity: 0; 
    z-index: 1; 
    width: 20px; 
    height: 20px; 
    cursor: pointer; 
} 

Fiddle