如何为Chrome设置复选框颜色 [英] how to set checkbox color for chrome

问题描述

在我的应用程序中，我展示了一个带有图例的图表。传奇有彩色复选框。下面是一个可以在 IE 中正常工作的复选框的代码，但该颜色不会出现在 Chrome 和 Firefox

In my application I am showing a graph with legends. Legends have colored checkboxes. Below is code for a checkbox that works fine in IE but the color does not appear in Chrome and Firefox

< input type =checkboxstyle =background-color：＃d65aef; >

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

Please tell me what should I do so that it works in IE,Chrome and Firefox. I have to use the hex color as used in the given code.

推荐答案

表单控件像复选框， radio ，选择等等，使用基于操作系统主题的平台原生样式。您可以使用 -moz重置它-appearance 和 -webkit-appearance 属性。但是，这些属性也会重置控件的大小，并且可能是其他内容，所以您需要手动添加宽度/高度：

Form controls like checkbox, radio, select and etc using a platform-native styling based on the operating system's theme. You can reset it by using -moz-appearance and -webkit-appearance properties. But this properties will also reset sizes of control and may be something else, so you will need to add width/height manually:

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

同样对于复选框，您需要提供一个选中的状态呈现：

Also for checkbox you need to provide a checked state render:

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

这篇关于如何为Chrome设置复选框颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！