在 CSS 上使用图像样式的复选框和单选仅适用于 Chrome

Posted 2023-03-27

【中文标题】在 CSS 上使用图像样式的复选框和单选仅适用于 Chrome

【英文标题】：Checkbox and radio styled with images on css works only in Chrome

【发布时间】：2012-08-29 09:03:39

【问题描述】：

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

【问题讨论】：

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

伪元素的存在是为了让你在一个元素的内容之前和之后添加内容（即在元素内部，在其内容之前和之后，而不是在元素本身之前和之后），但是替换元素是“无内容”元素。

【参考方案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/

【参考方案2】：

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

希望这会有所帮助。

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。