如何修改选中状态单选按钮在 hover 时的颜色？

你遇到的问题核心在于两点：一是原生单选按钮的accent-color hover状态可能被浏览器默认样式优先级覆盖；二是如果<label>未与单选按钮正确关联，hover标签也无法触发输入框的状态变化。下面提供两种可行解决方案：

方案1：关联标签并直接设置input的hover状态 #

先确保HTML里的单选按钮与<label>正确绑定（点击标签可选中按钮，同时hover标签会触发输入框的hover状态）：

<!-- 关联label的完整结构 -->
<input class="custom-radio" type="radio" name="selected_center" value="{{center.id}}" id="selected_center_{{center.id}}">
<label for="selected_center_{{center.id}}">选择该中心</label>

修改CSS，直接为单选按钮的:hover状态指定accent-color：

input[type='radio'].custom-radio {
    accent-color: #0098ff;
}
/* 鼠标悬浮时的自定义颜色 */
input[type='radio'].custom-radio:hover {
    accent-color: #007acc; /* 可选择比原色调更深/浅的颜色 */
}

方案2：自定义完全可控的单选按钮（兼容旧浏览器） #

如果部分旧浏览器不支持accent-color的hover状态，可隐藏原生单选按钮，用<label>的伪元素实现自定义样式，hover状态完全由你控制：

<!-- 调整结构，将input嵌套进label -->
<label class="radio-label">
  <input class="custom-radio" type="radio" name="selected_center" value="{{center.id}}">
  <span class="radio-custom"></span>
  选择该中心
</label>

对应的CSS代码：

/* 隐藏原生单选按钮 */
.radio-label .custom-radio {
    position: absolute;
    opacity: 0;
}

/* 自定义单选按钮的基础样式 */
.radio-label .radio-custom {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid #0098ff;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
    position: relative;
}

/* 选中状态的样式 */
.radio-label .custom-radio:checked + .radio-custom {
    background-color: #0098ff;
}

/* 选中时的内部圆点 */
.radio-label .custom-radio:checked + .radio-custom::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #fff;
}

/* hover时的边框与背景变化 */
.radio-label:hover .radio-custom {
    border-color: #007acc;
    background-color: rgba(0, 152, 255, 0.1);
}

/* 选中状态下hover的颜色调整 */
.radio-label .custom-radio:checked:hover + .radio-custom {
    background-color: #007acc;
}

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