我创建了这种风格,但我不知道如何让它在 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):