html - 为什么我的样式不适用于我的标签和输入？

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 演示

标签： htmlcss

Answer 1

更新以使用外观：无标签反映上面的答案。也适用于可访问性。

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/