如何为 input[type=checkbox] 创建不同的样式？

Question

此回复很好地向您展示了如何在页面上设置复选框样式：Checkboxes not working

…尽管 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

点击下方片段中的图片查看切换

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>