Question

我想使用下面的代码自定义复选框，但样式不会应用于我的复选框：

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 Demo

Answer 1

使用appearance：none标记更新以反映上述答案。也适用于辅助功能。

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

https://jsfiddle.net/b8uedf9p/

Answer 2

我知道您无法更改标签，因为您在评论中提到的系统流程。我不确定输入后是否还有其他内容，但这篇文章可能会帮到你！

https://css-tricks.com/the-checkbox-hack/

此链接中还有一个实时演示（<label>代码前面有<input>标记： http://dabblet.com/gist/1506530

Answer 3

从您的问题来看，您似乎想在复选框中使用某种CSS样式。尝试使用appearance: none;删除复选框的默认属性。这样就可以应用你的css样式了。像这样

＆＃13;

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

＆＃13;

<label for="thing">Checkbox</label><input type='checkbox' name='thing' value='valuable' id="thing"/>

＆＃13;

为什么我的风格不适用于我的标签和输入？

3 个答案: