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;
}
完全让我难住了,任何帮助将不胜感激:)
最佳答案
我通常使用整个相邻同级选择器 (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>
关于html - 通过用标签包装输入来使用 CSS3 设置输入元素的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27641460/