Question

此回复非常出色地向您展示如何在页面上设置复选框样式：Checkboxes not working

...虽然输入[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

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

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

2 个答案: