3

我创建了这种风格，但我不知道如何让它在 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 中完美运行。我尝试使用背景图像，但也不起作用。谁能帮我解决这个问题？谢谢。

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

4

2 回答 2

1

浏览器对多种背景的支持相对普遍，所有主要浏览器都提供支持，无需供应商前缀。Firefox 从 3.6 版（Gecko 1.9.2）开始支持多种背景，从 1.3 版开始支持 Safari，从 10 版开始支持 Chrome，从 10.50 版（Presto 2.5）开始支持 Opera，从 9.0 版开始支持 Internet Explorer。

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

于 2012-09-04T16:56:32.003 回答
0

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

希望这可以帮助。

于 2012-09-04T17:01:26.017 回答