Question

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

中的颜色不会显示

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

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

Answer 1

使用基于操作系统主题的平台本机样式来构建checkbox，radio，select等控件。您可以使用-moz-appearance and -webkit-appearance properties重置它。但是这个属性也会重置控件的大小，可能是其他的，所以你需要手动添加宽度/高度：

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>

如何设置chrome的复选框颜色

2 个答案: