如何消除radio按钮hover与点击按压时的颜色深浅变化

浏览器对原生radio按钮的:hover、:active（点击未松开）状态会默认调整accent-color的深浅，只设置部分状态的颜色无法覆盖所有默认行为。可以通过两种方式解决：

方式一：覆盖所有交互状态的accent-color #

显式给radio的所有相关伪类设置相同的accent-color，彻底替换浏览器默认的颜色变化逻辑：

.radio {
  width: 60px;
  height: 60px;
  /* 基础状态颜色 */
  accent-color: red;
}

/* 覆盖hover状态 */
input[type="radio"]:hover {
  accent-color: red;
}

/* 覆盖点击按压的active状态 */
input[type="radio"]:active {
  accent-color: red;
}

/* 覆盖选中状态 */
input[type="radio"]:checked {
  accent-color: red;
}

/* 可选：覆盖focus状态，避免聚焦时颜色变化 */
input[type="radio"]:focus {
  accent-color: red;
}

方式二：完全自定义Radio样式（彻底摆脱原生默认样式） #

如果上述方式仍有浏览器兼容性问题，可以用appearance: none去掉原生样式，手动绘制radio按钮，完全控制所有状态的样式：

.radio {
  width: 60px;
  height: 60px;
  /* 去掉原生样式 */
  appearance: none;
  border: 3px solid red;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  background-color: transparent;
}

/* 选中状态的内部圆点 */
.radio:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: red;
}

/* 所有交互状态保持样式不变 */
.radio:hover,
.radio:active,
.radio:focus {
  border-color: red;
  outline: none; /* 可选：去掉默认聚焦边框 */
}

.radio:checked:hover::after,
.radio:checked:active::after {
  background-color: red;
}

两种方式都能实现hover、按压时颜色保持红色不变的效果，可根据实际需求选择。

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