修改单选按钮颜色时用橙色/#fb0出现黑色圆角问题求助

问题说明 #

调整单选按钮颜色时，使用红色、蓝色、绿色这类颜色显示正常，但设置为橙色（颜色代码#fb0）时，单选按钮的中间区域会出现黑色圆角。

accent-color: red	accent-color: #fb0

当前使用的CSS代码：

input[type=radio] {
    accent-color: #fb0;
    /* ... */
}

问题原因 #

accent-color是浏览器原生样式控制属性，当设置的颜色亮度较高时，部分浏览器会自动添加深色对比元素（比如这个黑色圆角）来保证可访问性，但这会导致显示效果不符合预期。

解决办法 #

完全自定义单选按钮样式，绕过原生accent-color的限制，用伪元素模拟单选按钮外观：

/* 隐藏原生单选按钮 */
input[type=radio] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #fb0;
  border-radius: 50%;
  outline: none;
  cursor: pointer;
  position: relative;
}

/* 选中状态的填充样式 */
input[type=radio]:checked::before {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #fb0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 可选：添加hover和focus状态样式 */
input[type=radio]:hover {
  border-color: #ff9a00;
}

input[type=radio]:focus {
  box-shadow: 0 0 0 2px rgba(255, 187, 0, 0.3);
}

这种方式能完全控制单选按钮的颜色和样式，不会出现浏览器自动添加的黑色圆角，同时也能保证交互状态的一致性。

内容的提问来源于stack exchange，提问作者ishu gupta