Question

我想使用图像设置复选框的样式，但因为复选框是使用剃刀生成的，所以它会创建一个额外的隐藏输入，因此复选框和标签不会彼此相邻，因此

输入[type =复选框] +标签

不再有效，因为它们不再与兄弟选择器相邻。

删除隐藏的输入和样式，但这不是我的选择

 .yesno input[type=checkbox] + label {
   background-image: url(http://placehold.it/40x40/ff6633/000000?text=yes);
   height: 40px;
   width: 40px;
   display: inline-block;
   padding: 0px;
   }

Answer 1

之前我和Razor有过这个问题。我不得不像这样添加另一个+选择器：

.yesno input[type=checkbox] + input + label {
  background-image: url(http://placehold.it/40x40/ff6633/000000?text=yes);
  height: 40px;
  width: 40px;
  display: inline-block;
  padding: 0 0 0 0px;
}

你可以在这里看到工作示例： http://jsfiddle.net/4huzr/2437/

这不是最好的，但它是我过去发现的最简单的解决方案：）

或者@Lgson提到你可以使用~选择器。

.yesno input[type=checkbox] ~ label

css3复选框样式无法使用额外输入

1 个答案: