Html 通过使用标签包装输入，使用CSS3设置输入元素的样式

CSS3专家：

我正在尝试重新设置输入复选框的样式，如果我给每个输入一个ID，并用标签和“for”属性引用它，我可以使用以下样式：

<input class="checkbox" type="checkbox" id="myCheckBox><label for="myCheckBox">foo</label>

---

我完全被难住了，任何帮助都将不胜感激：）

我通常使用整个相邻的同级选择器（

input+label

），但如果您不喜欢，您可以随时添加包装元素以进行样式设置。不幸的是，它确实有点弄脏了标记，但我真的看不到任何其他方式来设置它的样式，并且不使用

id

和

for

方法

虽然不理想，但它确实有效

输入[类型=复选框]{
显示：无；
}
输入[类型=复选框]+div{
光标：指针；
背景色：#fff；
边框：1px实心#333；
填充：9px；
边界半径：5px；
显示：内联块；
位置：相对位置；
顶部：3px；
宽度：10px；
高度：10px；
}
输入[类型=复选框]：选中+div{
背景色：#e00000；
边框：1px实心#e00000；
颜色：#fff；
}
输入[类型=复选框]：选中+div:after{
颜色：#fff；
宽度：100%；
文本对齐：居中；
字号：1em；
线高：1米；
}

---

foo

复选框是通过

id

-

for

关系“连接”到标签的，因此如果您删除id，单击标签不会触发复选框。你为什么要删除复选框上的

id

？对，完全理解我的工作原理。输入在服务器端生成。我试图找出如何在不修改服务器端的情况下重新设置它们的样式，以便为每个复选框输入添加ID。因此，如果我能将输入包装在标签中，然后找出合适的CSS3选择器，我认为我很好，这就是我迷失的地方。我可以回头做服务器端的编辑，但我真的想弄清楚这一点，只是为了弄清楚。好吧，我有点困惑。所以你不能更改html，只能更改css，对吗？你能提供你必须使用的html吗？我想/需要让我的服务器端代码看起来像这样：

foo

而不是

，真的，如果有必要的话，我可以用ID来做，但是我发布这个问题的原因是为了让我学会如何在没有ID的情况下做。换句话说，如何使用CSS3参考/选择
中的
。
<label>foo<input class="checkbox" type="checkbox"></label>

.checkbox {
    display:none;
}
.checkbox + label {
    cursor:pointer;
    background-color: #fff;
    border:1px solid #333;
    padding:9px;
    border-radius:5px;
    display: inline-block;
    position: relative;
    top:3px;
    width:10px;
    height:10px;
}
.checkbox:checked + label {
    background-color: #e00000;
    border: 1px solid #e00000;
    color: #fff;
}
.checkbox:checked + label:after {
    color: #fff;
    width: 100%;
    text-align: center;
    font-size:1em;
    line-height:1em;
}