仅使用CSS自定义复选框输入

Question

我正在尝试使用CSS创建一个自定义复选框,并没有太多运气.我尝试了两种不同的技术:

1. http://lea.verou.me/2011/05/rule-filtering-based-on-specific-selectors-support/
2. 自定义图像作为单选按钮(来自derik的建议)

第一个效果最好,并在IE9,FF和Chrome中正确显示.但是,Chrome中的功能似乎有些偏差.在Chrome上进行测试时,我无法点击图片导致"已选中"更改,而是必须点击标签的文字.有没有人找到更好的,只有CSS的方式？有没有办法纠正Chrome中的行为？

Answer 1

迈克一个很好的解决方案是不设置复选框的样式,而是设置复选框的标签并隐藏复选框按钮.

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对标签执行任何操作.这比尝试设置复选框样式更容易,因为所有浏览器都以不同方式呈现输入