能否用React与styled-components自定义特定样式的<input type="radio">？

当然可以实现，直接用原生<input type="radio">配合CSS就能搞定，核心思路是隐藏原生单选按钮，用相邻元素模拟自定义外观，这样就能完全控制内外圈的颜色表现，不受默认accent-color的同步限制。

具体实现代码 #

<!-- 容器包裹input和模拟按钮的span，不用label也能关联交互 -->
<div class="radio-group">
  <div class="radio-item">
    <input type="radio" name="custom-radio" id="radio1" class="custom-radio">
    <span class="radio-visual"></span>
    选项1
  </div>
  <div class="radio-item">
    <input type="radio" name="custom-radio" id="radio2" class="custom-radio" checked>
    <span class="radio-visual"></span>
    选项2
  </div>
</div>

/* 自定义颜色变量，方便修改 */
:root {
  --radio-unchecked-inner: #ccc; /* 未选中内圈颜色 */
  --radio-checked-inner: #007bff; /* 选中内圈颜色 */
  --radio-border: #999; /* 固定外圈边框颜色 */
  --radio-size: 18px; /* 按钮大小 */
}

.radio-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  margin-bottom: 10px;
}

/* 隐藏原生单选按钮，但保持可点击性和表单功能 */
.custom-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* 模拟单选按钮的外观 */
.radio-visual {
  display: inline-block;
  width: var(--radio-size);
  height: var(--radio-size);
  border: 2px solid var(--radio-border);
  border-radius: 50%;
  position: relative;
  transition: all 0.2s ease;
}

/* 未选中时的内圈 */
.radio-visual::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--radio-size) / 2);
  height: calc(var(--radio-size) / 2);
  border-radius: 50%;
  background-color: var(--radio-unchecked-inner);
}

/* 选中时修改内圈颜色，外圈边框保持不变 */
.custom-radio:checked + .radio-visual::before {
  background-color: var(--radio-checked-inner);
}

/* 可选：添加聚焦状态的样式，提升可访问性 */
.custom-radio:focus + .radio-visual {
  outline: 2px solid #0056b3;
  outline-offset: 2px;
}

关键说明 #

• 隐藏原生input但保留功能：通过绝对定位+透明度0隐藏原生按钮，既看不到默认样式，又能正常响应点击、表单提交等行为。
• 颜色完全可控：用CSS变量定义各部分颜色，修改--radio-unchecked-inner、--radio-checked-inner就能调整内圈颜色，--radio-border固定外圈颜色，不会随选中状态变化。
• 无需label关联：用容器<div class="radio-item">包裹所有元素，点击容器内的文字或模拟按钮区域，都会触发input的选中状态。

这样就能满足你的两个需求：

1. 无论是否选中，内圈始终存在，未选中灰色、选中蓝色；
2. 可自由修改内圈颜色，选中时外圈边框颜色保持不变。

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