没有标签的造型复选框

我试过this教程来创建一个不同样式的复选框。没有标签的造型复选框

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

如何在没有文本的情况下查看复选框？

2016-04-18 Dror

在可以看到到处CSS'输入[类型=复选框]：不（旧）：检查+ label'，因此，如果删除'label'，CSS将不被使用。所以要么改变你的CSS，要么将标签留空 - ''。 – Legionar

只要一个空的''我会猜。 – Lucky

在CSS中你可以看到无处不在input[type=checkbox]:not(old):checked + label，所以如果你删除label，CSS将不会被使用。所以要么改变你的CSS，要么将标签留空 - <label for="XYZ"></label>。如果你想使用仅输入，也可以用apperance属性造型复选框

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

DEMO

来源

2016-04-18 11:07:38 Legionar

这是来自[JSFiddle]（https://jsfiddle.net/bvzrnhnk/）的带有空标签的示例（它不起作用）。我也尝试从css中删除“+ label”（并从html中删除标签），但它不起作用 – Dror

请参阅我的编辑，它的工作。 – Legionar

：

编辑

所以只需添加min-width和height财产。但它不适用于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

来源

2016-04-18 12:08:30 GeckoTang

没有标签的造型复选框

回答

相关问题