チェックボックススタイリングのみCSS

Question

私はチェックボックスを持っており、それをスタイルしたいと思います。チェックボックスをオフにすると黒い境界線が表示され、チェックボックスがオンの場合、穴のチェックボックスはフックなしで黒くなります。あなたは私が今まで何をしてきたかを見ています。残念ながらそれは働かない。

マイコード：

<form> 
    <input class="newsletter" type="checkbox" value="text">Ich möchte den Newsletter bekommen 
</form> 

input[type=checkbox]:not(old){ 
    width  : 13px; 
    margin : 0; 
    padding : 0; 
    opacity : 0; 
} 

.newsletter:unchecked{ 
    width:13px; 
    height: 13px; 
    border: 2px solid black; 
border-radius:3px; 
} 

.newsletter:checked{ 
    width:13px; 
    height: 13px; 
    border: 2px solid black; 
    background-color:black; 
border-radius:3px; 
} 

私のコードの最初の部分は、現在のチェックボックスを非表示にします。ボックスがチェックされていない場合は2番目の部分がチェックボックスにチェックされ、ボックスがチェックされている場合は3番目の部分になります。私はこれがあなたがこれらのチェックボックスをスタイリングしている方法だと思っていました。何が間違っているのですか？

Answer 1

助けるかもしれないあなたのコードを実行する必要がある最初の事はlabel、例えばを追加です：

<form> 
    <input class="newsletter" type="checkbox" value="text" id="newsletter" name="newsletter"> 
    <label for="newsletter">Ich möchte den Newsletter bekommen</label> 
</form> 

私も追加しましたチェックボックスにはidとnameという属性があります。 idは、labelのfor属性と同じである必要があります。

次に、チェックボックスを非表示にする必要があります。私は目に見えてYahoo's exampleに基づいて物事を隠すためにCSSでsr-onlyのクラスを使用する傾向がある：

.sr-only{ 
    height: 1px; 
    width: 1px; 
    overflow: hidden 
    clip: rect(1px,1px,1px,1px); 
    position: absolute; 
} 

次我々は擬似要素beforeラベルを作成します。スタイルルールについては、隣接する兄弟セレクタ（+）を使用して、ラベルが隣接するチェックボックスの兄弟である場合にルールを適用します。

.newsletter:not(checked) + label:before{ 
    content:" "; 
    display: inline-block; 
    width:13px; 
    height: 13px; 
    border: 2px solid black; 
    border-radius:3px; 
} 

newsletterがチェックされていないとき:not(checked)手段はこれらの規則を適用します。それが唯一のラベルがクラスnewsletterの兄弟をthat'reターゲットますので、私は自分のクラス名を維持しています。

newsletterは、我々はこのような背景色を変更checkedときのスタイルを変更するには：

.newsletter:checked + label:before{ 
background-color:black; 
} 

この方法で私たちの擬似チェックボックスをクリックするか、ラベルのテキストが送信するすべてのラベルをクリックする（チェックボックスをオンにしますフィールドにフォーカスするので、チェックボックスをチェックするとチェックされます）。

Answer 2

これはあなた

.checkbox input[type=checkbox] { 
 
    display: none; 
 
} 
 
.checkbox input[type=checkbox]:not(:checked) + label:before { 
 
    content: ""; 
 
    border: 2px solid #000; 
 
    height: 10px; 
 
    width: 10px; 
 
    display: inline-block; 
 
} 
 
.checkbox input[type=checkbox]:checked + label:before { 
 
    content: ""; 
 
    border: 2px solid #000; 
 
    height: 10px; 
 
    width: 10px; 
 
    background: #000; 
 
    display: inline-block; 
 
}

<form> 
 
    <div class="checkbox"> 
 
    <input id="check" class="newsletter" type="checkbox" value="text"> 
 
    <label for="check"> Ich möchte den Newsletter bekommen</label> 
 
    </div> 
 
</form>