html - 通过用标签包装输入来使用 CSS3 设置输入元素的样式

Question

CSS3 专家:

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

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

我想松开 id 以简化，所以我尝试用标签包装输入，但我似乎无法弄清楚如何设置它的样式:

<label>foo<input class="checkbox" type="checkbox"></label>

这是我使用 ID 的工作 CSS:

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

完全让我难住了，任何帮助将不胜感激:)

Answer 1

我通常使用整个相邻同级选择器 (input + label) 去你去的地方，但如果你不喜欢那样，你总是可以添加一个包装元素来进行样式设置。不幸的是，它确实有点弄脏了标记，但我真的没有看到任何其他方式来设置它的样式并且不使用 id 和 for 方法。

不理想，但它有效。

input[type=checkbox] {
    display:none;
}
input[type=checkbox] + div {
    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;
}
input[type=checkbox]:checked + div {
    background-color: #e00000;
    border: 1px solid #e00000;
    color: #fff;
}
input[type=checkbox]:checked + div:after {
    color: #fff;
    width: 100%;
    text-align: center;
    font-size:1em;
    line-height:1em;
}

<label><input type="checkbox"><div>foo</div></label>