為什么我的樣式不適用於我的標簽和輸入內容？

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

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/

Answer 2

我知道，由於注釋中提到的系統過程，您無法更改標簽。 我不確定輸入后是否還有其他內容，但是本文可能會對您有所幫助！

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

此鏈接中還有一個現場演示（在<input>標記之前具有<label> <input>標記）： http : //dabblet.com/gist/1506530

Answer 3

從您的問題看來，您想在復選框上使用某種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"/>