入力用の異なるスタイルを作成する方法[type = checkbox]？

Question

この応答は、ページ上のチェックボックスのスタイルをどのように示すの優れた仕事をしていません：Checkboxes not working

... 入力[タイプ=チェックボックス]がすべてのチェックボックスにそのスタイルを適用するにもかかわらず。

私は2つの異なるチェックボックスの画像を組み込みたいと思います。私たちはfacebookとtwitterをそれぞれ言うでしょう。結果として、私はそれらが異なったイメージとクリックされたときに異なるイメージを持っているので、それらを独立してスタイルする必要があります。

以下のコードを使用すると、最初のチェックボックスで問題なく動作します。

スタイル：

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

input[type=checkbox] + label 
{ 
    background-image:url(facebook_active.png); 
height: 53px; 
width: 77px; 
display:inline-block; 
padding: 0 0 0 0px; 
} 
input[type=checkbox]:checked + label 
{ 
background-image:url(facebook_inactive.png); 
height: 53px; 
width: 77px; 
display:inline-block; 
padding: 0 0 0 0px; 
} 

チェックボックス：

<input type='checkbox' name='facebook' id="facebook"><label for="facebook"></label> 

<input type='checkbox' name='twitter' id="twitter"><label for="twitter"></label> 

私の質問は、私はFacebookのチェックボックスのためにやったようにどのように私は2番目のチェックボックス（ツイッター）のスタイルができています。個別にスタイルを設定できるように、個々のものに固有の方法がありますか？

Answer 1

input[type=checkbox] { 
 
    display: none; 
 
} 
 
#facebook + label { 
 
    background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRvizk1rdyu1GCcYVDH0rQJtFNwo5lKkICU8Q5byYMAhWslC2uWfw"); 
 
    height: 53px; 
 
    width: 77px; 
 
    display: inline-block; 
 
    padding: 0 0 0 0px; 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
} 
 
#facebook:checked + label { 
 
    background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQTnxDwiDgiIn3IxkbO2d5dzR4F27MtO1JeYmNjJDCZ8JZtzDQmTA"); 
 
    height: 53px; 
 
    width: 77px; 
 
    background-repeat: no-repeat; 
 
    background-size: contain; 
 
    display: inline-block; 
 
    padding: 0 0 0 0px; 
 
} 
 
#twitter + label { 
 
    background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-I0nSWnXixL0KGa38_32giQZyjT7XPhc78AHCb12nG-jvV7u1SA"); 
 
    height: 53px; 
 
    width: 77px; 
 
    display: inline-block; 
 
    padding: 0 0 0 0px; 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
} 
 
#twitter:checked + label { 
 
    background-image: url("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRE0GIa1464BUBgLWNNLtqGRsqkWFSGHOgcBxn_qAO5HJuXEVcvMA"); 
 
    height: 53px; 
 
    width: 77px; 
 
    background-repeat: no-repeat; 
 
    display: inline-block; 
 
    padding: 0 0 0 0px; 
 
}

<input type='checkbox' name='facebook' id="facebook"> 
 
<label for="facebook"></label> 
 

 
<input type='checkbox' name='twitter' id="twitter"> 
 
<label for="twitter"></label>

Answer 2

idsを使用して2つのチェックボックスを区別します。 Btw、これは非常にです。基本CSSです。

input[type=checkbox] { 
 
    display: none; 
 
} 
 
input[type=checkbox] + label { 
 
    height: 53px; 
 
    width: 77px; 
 
    display: inline-block; 
 
    padding: 0; 
 
} 
 

 
#facebook + label { 
 
    background-image: url(facebook_active.png); 
 
} 
 

 
#twitter + label { 
 
    background-image: url(twitter_active.png); 
 
} 
 

 
#facebook:checked + label { 
 
    background-image: url(facebook_inactive.png); 
 
} 
 

 
#twitter:checked + label { 
 
    background-image: url(twitter_inactive.png); 
 
}

<input type='checkbox' name='facebook' id="facebook"> 
 
<label for="facebook"></label> 
 

 
<input type='checkbox' name='twitter' id="twitter"> 
 
<label for="twitter"></label>