选和单选与图片上的CSS样式只能在Chrome

我创建这个风格，我不知道如何使它在IE和Firefox：选和单选与图片上的CSS样式只能在Chrome

input[type="checkbox"]:before 
{ 
    content:""; 
    display:inline-block; 
    background: url("../images/controls.png") 0% 5%, url("../images/controls.png") 0% 2.5%, white; 
    display: block; 
    width: 19px; 
    height: 19px; 
    vertical-align: middle; 
} 
input[type=checkbox]:hover:before 
{ 
    background-position: 0% 10%; 
} 
input[type=checkbox]:checked:before 
{ 
    background: url("../images/controls.png") 0% 15.1%, url("../images/controls.png") 0% 5%, white; 
} 

input[type="radio"]:before 
{ 
    content:""; 
    display:inline-block; 
    background: url("../images/controls.png") 0% 2.5%, url("../images/controls.png") 0% 30.6%, white; 
    display: block; 
    width: 19px; 
    height: 19px; 
    vertical-align: middle; 
} 
input[type=radio]:hover:before 
{ 
    background-position: 0% 35.6%; 
} 
input[type=radio]:checked:before 
{ 
    background: url("../images/controls.png") 0% 40.6%, url("../images/controls.png") 0% 30.6%, white; 
}

它在Chrome和Safari中正常使用。我试图使用背景图像，但不工作。任何人都可以帮助我吗？谢谢。

我使用这个图像（controls.png）：多重背景

来源

2012-09-04 ALima

实际上，即使它看起来很酷，即使它很方便，它也不应该工作。从技术上讲，这是WebKit中的一个错误。 – Ana

存在伪元素以允许您在元素的内容之前和之后（即元素内部，内容之前和之后，而不是元素之前和之后）添加内容，但替换的元素是“无内容“元素。 – Ana

你可以看看Custom Crossbrowser Styling for Checkboxes and Radio Buttons

希望这有助于。

来源

2012-09-04 17:01:26

尽管此链接可能回答问题，但最好在此处包含答案的基本部分，并提供供参考的链接。如果链接页面更改，则仅链接答案可能会失效。 – Tom

浏览器支持所有提供支持的主要浏览器的比较普遍，而无需供应商前缀。 Firefox自从3.6版本（Gecko 1.9.2），1.3版本以后的Safari，10版本以后的Chrome，10.50版本以后的Opera（Presto 2.5）以及9.0版本以后的Internet Explorer，都支持多种背景。

从http://www.css3.info/preview/multiple-backgrounds/

来源

2012-09-04 16:56:32 Salketer

选和单选与图片上的CSS样式只能在Chrome

回答

相关问题