没有标签的样式复选框

Question

我尝试了this教程来创建一个具有不同风格的复选框。

此复选框有一个标签。当我删除它的标签（或其中的文本）时，复选框没有显示。

如何在没有文字的情况下看到复选框？

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

DEMO

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

DEMO