自定义radio单选按钮颜色后选中态内部小圆点消失如何解决

问题原因 #

你用::after伪元素覆盖了原生单选框的显示区域，选中状态下仅放大了边框宽度，伪元素背景仍为白色，自然看不到原生的选中圆点。而且你没有清除原生单选框的默认样式，不同浏览器还可能出现表现不一致的问题。

修复方案 #

修改后的CSS代码如下：

/* 清除原生单选框默认样式，避免和自定义效果冲突 */
input[type='radio'] {
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
}

input[type='radio']:after {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  top: -2px;
  left: -1px;
  position: relative;
  background-color: white;
  display: inline-block;
  visibility: visible;
  border: 1px solid black;
  content: ''; /* 显式指定content，保证伪元素在所有浏览器正常渲染 */
}

input[type='radio']:checked:after {
  /* 用径向渐变实现内部黑色选中圆点，不需要修改边框宽度 */
  background: radial-gradient(circle, black 0%, black 4px, white 4.5px, white 100%);
}

改动说明 #

• 新增appearance: none清除原生控件默认样式，避免多端兼容问题
• 给伪元素添加必填的content属性，确保所有浏览器都能正常渲染自定义样式
• 选中状态通过径向渐变直接绘制内部黑色圆点，无需修改边框宽度，和未选中状态的边框粗细保持一致，视觉更统一
• 保留了你原来的偏移量设置，不需要调整原有布局的间距

内容的提问来源于stack exchange，提问作者Alpha Bravo Charlie