如何仅使用 CSS 更改 Chrome 和 Firefox 中单选按钮边框的颜色？答案

【问题标题】：How can I change the color of a radio button border in Chrome & Firefox using only CSS?如何仅使用 CSS 更改 Chrome 和 Firefox 中单选按钮边框的颜色？
【发布时间】：2014-02-09 00:29:27
【问题描述】：

如何仅使用 CSS 更改 Chrome 和 Firefox 中单选按钮的边框颜色？我已将以下内容添加到我的 css 文件中，它不会改变浏览器默认设置的外观。

input[type="radio"] {
    border: 1px solid $ltbrown;
  }

我也尝试过用“轮廓”代替边框，但这会在默认圆形边框周围创建一个方形边框。

【问题讨论】：

我认为不使用图像是不可能的。类似：stackoverflow.com/questions/2460501/…

标签： css google-chrome firefox radio-button border

【解决方案1】：

我怀疑是否有可能做到这一点。但你可以试试这个： http://css-tricks.com/the-checkbox-hack

这个问题听起来有点像： Change the border color of the checkbox and radio button

【讨论】：

【解决方案2】：

这适用于chrome，但不适用于firefox（实际上，当我偶然发现它时，我现在正试图弄清楚如何在firefox中修复它）。希望这会有所帮助

对于选中的单选框中心部分的颜色：

input[type="radio"]:checked:after { background-color: #6bc298; }

为边框颜色：

box-shadow: 0 0 0 2px #6bc298;

【讨论】：