我正在尝试使用CSS创建一个自定义复选框，并没有太多运气。我尝试了两种不同的技术：
第一个效果最好，并在IE9，FF和Chrome中正确显示。但是，Chrome中的功能似乎有些偏差。在Chrome上进行测试时，我无法点击图片导致“已选中”更改，而是必须点击标签的文字。有没有人找到更好的，只有CSS的方式？有没有办法纠正Chrome中的行为？
答案 0 :(得分：8)
迈克一个很好的解决方案就是不设置复选框的样式，而是设置复选框的标签并隐藏复选框按钮。
label { display: block; background: green; padding:10px; }
input[type="checkbox"] { display: none; }
<div>
<label for="example">Style me</label><input type="checkbox" id="example" />
</div>
当您单击标签时，它将选中复选框，隐藏此选项并使用css / javascript对标签执行任何操作。这比尝试设置复选框的样式更容易，因为所有浏览器都以不同的方式呈现输入。
答案 1 :(得分：3)
您可以使用伪元素：之前。这样你仍然可以获得复选框的功能。在我的例子中，我只是改变了颜色，但你可以添加一个白色背景和你自己的自定义图像背景：url（yourimage.png）。
在这里查看我的垃圾箱
答案 2 :(得分：0)
我推荐这个版本： http://equaltozero.ro/jquery-custom-form-v2-custom-input-type-checkbox-radio-and-custom-select-plugin/（这是我创建的一个小插件）
也许你会发现这对你有用。 ： - ）
从“@Lelio Faieta”的建议，我将写下有关该链接的更多细节。
这个插件（查询小插件）允许您使用输入类型（复选框和无线电）设计，禁用操作和自定义SELECT。这个版本可以让您更好地使用复选框。