にはcssチェックボックスがありますか？

Question

どのように私はcss ckeckbox + lebelをidとforなしで作ることができます。

私はこの方法を使用するが、それはwork.iは、CSSのckeckbox聖霊降臨祭 idと、このような for持つことができますdosnt

：次に

<label class="checkbox"> 
<input type="checkbox" value="1" name="files" > 
</label> 

：私はこれを持っているしたい

<div class="checkbox"> 
    <input id="f" type="checkbox" name="hi" class="checkbox" /> 
    <label for="f">Hello</label> 
</div> 

しかしを私はこのCSS（実際にはSCSS）を使用しています：

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

.checkbox{ 
    position: relative; 
    display: inline-block; 
    margin-right: 7px; 
    cursor: pointer; 
    vertical-align: middle; 
    &:after{ 
     content: ' '; 
     position: absolute; 
     border: 2px solid $black; 
     border-radius: 3px; 
     width: 20px; 
     height: 20px; 
     top: -5px; 
     left: -2px; 
     width: 14px; 
     height: 14px; 
    } 
    &:checked{ 
     font-family: 'FontAwesome'; 
     font-size: 2em; 
     content: "\f00c"; 
     color: $blue; 
     border-radius: 3px; 
    } 
} 
/* It dosnt work */ 
.checkbox:after > input[type=checkbox]:checked { 
     font-family: 'FontAwesome'; 
     font-size: 2em; 
     content: "\f00c"; 
     color: $blue; 
     border-radius: 3px; 
} 

チェックボックスをオンにしていますか？

あなたのLabelタグでスパンを使用する必要があります:)

Answer 1

助けてください。

.checkbox:after > input[type=checkbox]:checked 

この行は反対である必要があるため意味がありません。だから私はこのように変更しています：

input[type=checkbox]:checked ~ .checkbox:after 

あなたは〜次の要素で何かを確認した場合。

したがって、問題を解決するためにスパンを追加します。ここで行く：

Working Fiddle

$blue : blue; 
 
$black : black; 
 

 
label{ 
 
    input[type=checkbox]{ 
 
     opacity: 0; 
 
    } 
 
} 
 

 
.checkbox{ 
 
    position: relative; 
 
    display: inline-block; 
 
    margin-right: 7px; 
 
    cursor: pointer; 
 
    vertical-align: middle; 
 
    &:after{ 
 
     content: ' '; 
 
     position: absolute; 
 
     border: 2px solid $black; 
 
     border-radius: 3px; 
 
     width: 20px; 
 
     height: 20px; 
 
     top: -5px; 
 
     left: -2px; 
 
     width: 14px; 
 
     height: 14px; 
 
    } 
 
    &:checked{ 
 
     font-family: 'FontAwesome'; 
 
     font-size: 2em; 
 
     content: "\f00c"; 
 
     color: $blue; 
 
     border-radius: 3px; 
 
    } 
 
} 
 
/* It dosnt work */ 
 
input[type=checkbox]:checked ~ .checkbox:after{ 
 
     font-family: 'FontAwesome'; 
 
     font-size: 1em; 
 
     content: "\f00c"; 
 
     color: $blue; 
 
     border-radius: 3px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 
<label> 
 
    <input type="checkbox" value="1" name="files" > 
 
    <span class="checkbox"></span> 
 
</label>