沒有標簽的樣式復選框

Question

我嘗試了本教程來創建具有不同樣式的復選框。

此復選框有一個標簽。 當我刪除標簽（或其中的文本）時，未顯示該復選框。

如何在沒有文本的情況下看到復選框？

Answer 1

在CSS中，隨處可見input[type=checkbox]:not(old):checked + label ，因此，如果刪除label ，將不會使用CSS。 因此，要么更改CSS，要么將標簽留空- <label for="XYZ"></label> 。

編輯

因此，只需添加min-width和height屬性：

input[type=checkbox]:not(old) + label,
input[type=radio   ]:not(old) + label{
  height: 45px;
  min-width: 45px;
}

演示

Answer 2

如果只想使用輸入，還可以使用apperance屬性設置樣式復選框。 但是，它不適用於IE。

input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  box-sizing: borer-box;
  width: 100px;
  height: 30px;
  cursor: pointer;
  background: url(//dummyimage.com/100x30/000/ffffff&text=click+me);
}
input[type="checkbox"]:checked {
  background: url(//dummyimage.com/100x30/0e7d0e/ffffff&text=checked);
}

演示