如何为Chrome设置复选框颜色

Question

在我的应用程序中，我正在显示带有传奇的图形。传奇具有彩色复选框。以下是IE中正常工作的复选框的代码，但颜色不显示在Chrome和Firefox

中

<input type="checkbox" style="background-color:#d65aef;">

请告诉我该怎么做，以便它在IE，Chrome和Firefox中起作用。我必须使用给定代码中使用的十六进制颜色。

Answer 1

使用基于操作系统主题的平台本地样式来控制checkbox，radio，select和等。您可以使用-moz-appearance和-webkit-appearance属性将其重置。但是此属性也将重置控制大小，并且可能是其他的，因此您需要手动添加宽度/高度：

input[type=checkbox] {
     background: red;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 16px;
    width: 16px;
}

还需要提供检查状态渲染：

input[type=checkbox]:checked {
     background-image: url(/*custom checked icon url*/);
}

Answer 2

将input关闭到span（或div）并设置span颜色。

<span style="background-color:#d65aef;"><input type="checkbox" class="base" name="w3wp" style="background-color:#d65aef;" value="w3wp" checked="" onclick="legendChanged();" alt="fd" title="w3wp"></span>