如何为输入[type=checkbox]创建不同的样式

Question

这个响应很好地向您展示了如何为页面上的复选框设置样式:

…although input[type=checkbox]将其样式应用于所有复选框。

我想为两个不同的复选框合并图像-我们将分别说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> 

我的问题是如何样式第二个复选框(Twitter)，就像我为Facebook复选框所做的那样。有没有一种方法是具体的个人，以便我可以独立地样式他们?

Answer 1

使用id来区分两个复选框。顺便说一句，这是非常非常基本的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>

Answer 2

点击下面代码片段中的图片查看toggle

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>