pseudo-class:仅适用于webkit的自定义复选框

Question

可能的重复：
在'input'元素之前生成CSS内容

我正在尝试只使用css进行自定义复选框。这在基于webkit的浏览器(chrome、safari)上运行良好，但在其他浏览器上则不然。

input[type=checkbox]:before {
content:'';
display:inline-block;
width:24px;
height:24px;
margin-top:-8px;
margin-left:-12px;
background: url('../img/icons/checkbox_unchecked.png') left center no-repeat;
border: 1px solid gray;
}
input[type=checkbox]:checked:before {
background: url('../img/icons/checkbox_checked.png') left center no-repeat;
}​

为什么这只适用于基于webkit的浏览器？http://jsfiddle.net/jdB4a/这是jsfiddle，我只是把图像改成了背景色，但效果是一样的。

Answer 1

很抱歉，除了-webkit-。最好的方法是有一个带有标签的跨度，将样式放在上面，并设置不透明度：0；复选框上。听起来比实际情况更复杂。无论如何，这里有一个演示链接，解释了如何实现css3多浏览器自定义复选框，希望它能有所帮助。

http://acidjs.wemakesites.net/imageless-css-3-custom-checkboxes-and-radio-buttons.html