Question

CSS3专家：

我尝试重新设置输入复选框的样式，如果我为每个输入提供一个ID并使用标签引用它，我可以使用以下样式执行此操作，并且＆＃34;对于＆＃34;属性：

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

我想放弃身份以简化，所以我尝试用标签包装输入，但我似乎无法弄清楚如何设计它：

<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方法。

不理想，但有效。

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: