为什么我的风格不适用于我的标签和输入？
为什么我的风格不适用于我的标签和输入？
提问于 2018-05-08 20:14:33
我想使用下面的代码自定义一个复选框，但是样式没有应用到我的复选框：
input[type=checkbox] {
display:none;
}
label + input[type=checkbox] {
background: green;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
label + input[type=checkbox]:checked {
background: #0080FF;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}<label for="thing">
<input type='checkbox' name='thing' value='valuable' id="thing"/>
</label>
JSFiddle演示
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-05-08 20:17:36
更新，以反映上面的答案使用外观:无标签。也适用于可访问性。
label > input[type='checkbox'] {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
width: 20px;
height: 20px;
background: green;
}
label > input[type='checkbox']:checked {
background: blue;
}Stack Overflow用户
发布于 2018-05-08 20:32:09
从您的问题来看，您似乎希望在复选框上有一种css样式。尝试使用appearance: none;删除复选框的默认属性。这样，您的css样式将被应用。就像这样
input[type=checkbox] {
display:none;
}
label + input[type=checkbox]
{
background: green;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
label + input[type=checkbox]:checked
{
background: #0080FF;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}<label for="thing">Checkbox</label><input type='checkbox' name='thing' value='valuable' id="thing"/>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50241611
复制相关文章
相似问题
腾讯云开发者
