如何设置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>