复选框和单选框使用CSS样式化图片只在Chrome中有效。

Question

我创建了这个样式，但不知道如何在IE和Firefox中使其生效：

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中运行得非常完美。

我尝试使用background-image，但也不起作用。

有人能帮我解决这个问题吗？

我正在使用这张图片（controls.png）：

- Airton Gomes de Lima

---

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

伪元素存在的目的是允许您在元素内容之前和之后添加内容（即在元素内部，在其内容之前和之后，而不是在元素本身之前和之后），但替换元素是一个“无内容”元素。 - Ana

Answer 1

多背景的浏览器支持相对广泛，所有主要浏览器都提供支持，无需使用供应商前缀。 自Firefox 3.6（Gecko 1.9.2）以来，Firefox就支持多个背景，Safari从版本1.3开始，Chrome从版本10开始，Opera从版本10.50（Presto 2.5）开始，Internet Explorer从版本9.0开始。

来源：http://www.css3.info/preview/multiple-backgrounds/

- Salketer

Answer 2

你可以看一下自定义跨浏览器样式的复选框和单选按钮

希望这能帮到你。

- Alfred

---

虽然这个链接可能回答了问题，但最好在此处包含答案的关键部分并提供链接作为参考。仅有链接的答案可能会因链接页面的更改而失效。 - Tom