如何仅为单选按钮的圆形轮廓添加悬停变色效果？

你之前用accent-color的思路不对，这个属性是用来控制表单控件的整体主题色（包括选中后的填充色），没法单独实现未选中状态下的悬停轮廓变色。要达成需求，得换用outline或box-shadow来直接控制轮廓样式：

代码实现 #

<input type="radio">

/* 未选中的单选按钮悬停时，添加蓝色轮廓 */
input[type="radio"]:not(:checked):hover {
  outline: 2px solid blue;
  /* 调整轮廓与按钮的间距，避免和默认圆圈重叠 */
  outline-offset: 2px;
}

/* 可选：自定义聚焦样式，替换浏览器默认的聚焦框 */
input[type="radio"]:focus {
  outline: none;
  box-shadow: 0 0 0 2px blue;
}

/* 确保选中后保持默认填充色，不出现整体变色 */
input[type="radio"]:checked {
  accent-color: initial;
}

关键说明 #

• 用:not(:checked):hover精准定位未选中且处于悬停状态的单选按钮，只给这类状态添加蓝色轮廓
• 放弃用accent-color实现悬停效果，转而通过outline直接修改轮廓样式，避开它对选中状态颜色的影响
• accent-color: initial让选中后的按钮恢复默认填充色，避免出现整体变色的情况

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