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

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

输入[类型=复选框]+标签

不再工作，因为它们不再是相邻的兄弟选择器

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

在这里拉小提琴

---

我以前和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;
}

您可以在此处看到工作示例：

这不是最好的，但却是我过去找到的最简单的解决方案：）

或者正如@Lgson所提到的，您可以使用

~

选择器

.yesn无需输入[type=checkbox]~标签

.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;
}