如何为选中状态的Radio Button标签添加自定义CSS背景样式？

没问题！我来帮你搞定这个样式难题😉

首先看你的HTML结构，虽然.input-label不在包含单选框的div里面，但它和这个div是同一个父元素（.has-pretty-child）的直接子元素，我们可以用CSS的:has伪类来关联单选框的选中状态和标签样式——这是现代浏览器支持的强大选择器，完全不需要修改HTML。

直接用下面的CSS代码就能实现你要的效果：

/* 给选中状态的Radio标签添加背景色及样式 */
.prettyradio:has(input.radio:checked) + .input-label.radio-label {
  background-color: #00a3c9; /* 对应示例图里的蓝色，可按需修改 */
  color: #ffffff; /* 文字变白更醒目 */
  padding: 4px 10px; /* 内边距让背景更贴合文字 */
  border-radius: 4px; /* 圆角优化视觉效果 */
  transition: background-color 0.2s ease; /* 平滑过渡动画 */
}

/* 可选：鼠标悬停标签时的样式优化 */
.prettyradio + .input-label.radio-label:hover {
  background-color: #e8f4f7;
}

原理说明： #

• :has(input.radio:checked)会检测.prettyradio容器内的单选框是否处于选中状态
• 一旦检测到选中，就会选中它的下一个兄弟元素（也就是你的.input-label），然后给这个标签应用自定义样式

如果你的项目需要兼容不支持:has的旧浏览器（比如Firefox 120及以下、IE），那这个方案可能受限，但目前主流现代浏览器都已经支持:has伪类了，所以这个方案在绝大多数场景下都能用。

你可以根据自己的设计需求调整颜色、内边距、圆角这些参数，轻松实现示例图里的效果~

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