使用CSS改变复选框或单选按钮的颜色不工作

Question

我试图使用CSS来改变一个复选框单选按钮的颜色，这是由我们的CMS（CMS是第三方产品，集成到我们的网站）生成的一些代码嵌入我们的网站。

在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;
}

有什么建议？- 谢谢！我正试图改变单选框的颜色和元素等由CMS生成的CSS。

Answer 1

单选按钮是一个本地元素，所以你不能真正改变风格。唯一的方法，我知道是使用JS。这篇文章可以帮助你)

Answer 2

用这个CSS解决了这个问题，并强迫元素变成我想要的颜色。

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

移除主体并提供正确的格式，添加到全局CSS中，然后就解决了这个问题。