统一所有浏览器 CSS 样式的复选框答案

【问题标题】：Unify checkbox for all browser CSS Styling统一所有浏览器 CSS 样式的复选框
【发布时间】：2016-01-04 21:57:25
【问题描述】：

我需要一些帮助来在所有浏览器中创建统一复选框。我的应用程序使用的主题使复选框看起来很丑。

在哪里可以全局设置浏览器属性，以便复选框在不同平台上显示相同 http://jsfiddle.net/khan777/LnL7b/109/

CSS

.mycheckbox:checked {
    background: url(icon.png)no-repeat center center;
    background-size: 100%;
}

这是它在 Chrome 中的丑陋程度

【问题讨论】：

请提供minimal reproducible example 您的问题。使用最新版本的 Chrome，我无法在提供的小提琴中看到您的问题。作为旁注，您在问题中发布的代码包含一个错误，使其无效。您的 CSS 包含一个错误，使其无效。 .png) 和 no-repeat 之间应该有一个空格。这能解决您的问题吗？
显示 IE 和浏览器之间差异的屏幕截图也很方便。此外，您的屏幕截图看起来一点也不像 Chrome 中的小提琴；更多的复选框，更多的其他元素和样式，它可能会让人们感到困惑，它显示的是缩放状态。

标签： html css google-chrome internet-explorer

【解决方案1】：

如果您所指的“丑陋”是选中该框后的透明背景颜色，请将背景颜色添加到 URL 前面的属性中：

.MyCheckBox:checked {
    display : inline-block;
    background: #fff url(http://vignette3.wikia.nocookie.net/roblox/images/5/57/Very-Basic-Checkmark-icon.png/revision/latest?cb=20131125154354) no-repeat center center;
    background-size: 100%;
}

如果您有其他意思，请添加详细信息。

【讨论】：

谢谢 Knighter，这正是我要找的。span>
@King 很高兴我能帮上忙。您能否将此标记为正确答案，以便您的问题显示为已回答？谢谢。
我的问题被标记为 -2 否定，尽管这是开发人员现在面临的常见问题。它还包括通过 JSFiddle 的 CSS/HTML 代码，如果他们有同样的情况，任何人都可以使用。我想知道 q&a 在这里是如何工作的，以及如何删除否定的 -2。