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 Demo

Answer 1

已更新以反射(reflect)上面使用 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/