使用 CSS 更改复选框或单选按钮的颜色不起作用答案

【问题标题】：Change Color of Check Box or Radio Button using CSS not working使用 CSS 更改复选框或单选按钮的颜色不起作用
【发布时间】：2020-08-16 14:34:52
【问题描述】：

我正在尝试更改复选框的颜色？ / 使用 CSS 的单选按钮，由我们的 CMS 生成的嵌入在我们网站中的一些代码（CMS 是集成到我们网站中的第 3 方产品）：

在 FireFox 开发工具中查看复选框/单选按钮元素会显示此 HTML

<div class="SFchk" id="SFusrmanlog" style="" onclick="SF.usr.man('log');" set="1"><div></div><div><strong>Sign In</strong><br>with your email and password.</div></div>

还有这个 CSS：

#SFctr .SFchk[set] > div:first-child {background-color: #f1694f; }

这个 CSS 的颜色是红色，我们想要绿色

我尝试了以下方法，改变了其他元素的颜色等，但这没有奏效？此 CSS 已添加到我们的自定义 CSS 中，用于我们的网站来操作由 CMS 生成的颜色和元素等。

body #SFctr .SFchk[set] > div:first-child { background-color: #1F7665 !important; }

复选框/单选按钮元素也在 FireFox 开发工具中附加了这个 CSS：

#SFctr .SFchk > div:first-child {
    float: left;
    margin: 2px 0 0;
    padding: 0;
    height: 12px;
    width: 12px;
    border-radius: 12px;
    border: 1px solid #777;
}
#SFctr .SFchk > div {
    margin: 0 0 0 25px;
    padding: 0;
    cursor: pointer;
}

建议？ - 谢谢！

【问题讨论】：

标签： css button radio

【解决方案1】：

单选按钮是本机元素，因此您无法真正更改样式。我知道的唯一方法是使用 JS。(this article could help you)

【讨论】：

我可以在 FireFox 中将 CSS 颜色编辑为 1F7665，它会立即进行更改，所以我认为我会以某种方式应用强制 CSS 来更改颜色，就像我对其他元素、按钮等所做的那样. 这篇文章没有帮助，但谢谢:)

【解决方案2】：

设法用这个 CSS 解决这个问题，并强制元素成为我想要的颜色！

#SFctr .SFchk[set]>div:first-child {background-color: #1f7665 !important;}

删除正文并提供正确格式，添加到全局 CSS 和宾果游戏 - 问题已排序！

【讨论】：