为什么我无法使用 CSS 更改复选框的颜色？

为什么无论修改代码都无法更改复选框颜色？

尽管努力通过 CSS 自定义复选框的背景颜色，但许多用户遇到缺乏可见的变化。此问题在 Firefox 29 及更高版本中普遍存在。

说明

无法更改复选框颜色源于 HTML 中故意省略此功能。复选框和单选按钮被视为“本机”表单元素，这意味着它们的外观由浏览器而不是 CSS 规则控制。浏览器优先考虑用户界面中的一致性，因此，它们强制执行这些元素的默认视觉属性。

解决方案

要克服此限制并自定义复选框外观，考虑使用以下 CSS 属性：

<code class="css">accent-color</code>

通过设置此属性，您可以控制应用于复选框的强调色，其中包含复选标记和任何随附的背景。下面是一个示例：

<code class="css">#cb1 {
  accent-color: #9b59b6; /* Change the color of the check mark within checkbox #cb1 to blue */
}</code>

演示

请参阅下面的演示，见证使用强调颜色属性成功修改复选框颜色：

<code class="html"><input id="cb1" type="checkbox" checked />
<input id="cb2" type="checkbox" checked />
<input id="cb3" type="checkbox" checked /></code>

<code class="css">#cb1 {
  accent-color: #9b59b6;
}

#cb2 {
  accent-color: #34495e;
}

#cb3 {
  accent-color: #e74c3c;
}</code>

以上是为什么我无法使用 CSS 更改复选框的颜色？的详细内容。更多信息请关注PHP中文网其他相关文章！