如何为选中/未选中状态的radio input设置不同背景实现选中高亮

没问题！要达成你想要的「选中颜色选项高亮」效果，我们可以通过CSS结合HTML结构轻松实现，核心是利用radio的:checked伪类区分选中与未选中状态的样式。下面是具体的实现方案：

1. 搭建友好的HTML结构 #

把每个单选框和对应的颜色块包裹在<label>里，这样点击颜色块也能触发单选框选中，交互更顺畅：

<div class="color-selector">
  <!-- 红色选项，默认选中 -->
  <label class="color-item">
    <input type="radio" name="color-choice" value="red" checked>
    <span class="color-box" style="background-color: #ff4444"></span>
  </label>
  
  <!-- 绿色选项 -->
  <label class="color-item">
    <input type="radio" name="color-choice" value="green">
    <span class="color-box" style="background-color: #44dd44"></span>
  </label>
  
  <!-- 蓝色选项 -->
  <label class="color-item">
    <input type="radio" name="color-choice" value="blue">
    <span class="color-box" style="background-color: #4444ff"></span>
  </label>
  
  <!-- 可按需添加更多颜色选项 -->
</div>

2. 用CSS定义状态样式 #

先隐藏原生单选框，再给颜色块设置基础样式，最后通过:checked伪类实现选中时的高亮：

/* 隐藏原生单选框，保留功能不显示视觉元素 */
.color-item input[type="radio"] {
  display: none;
}

/* 未选中状态的颜色块样式 */
.color-box {
  display: inline-block;
  width: 45px;
  height: 45px;
  border-radius: 50%; /* 圆形色块，要方形就删掉这个属性 */
  margin: 0 8px;
  cursor: pointer;
  border: 3px solid transparent; /* 预留边框空间，选中时显示 */
  transition: all 0.2s ease; /* 平滑过渡动画，提升体验 */
}

/* 选中状态的高亮样式 */
.color-item input[type="radio"]:checked + .color-box {
  border-color: #222; /* 深色边框突出选中状态 */
  box-shadow: 0 0 0 4px rgba(34, 34, 34, 0.15); /* 外层阴影增强视觉层次 */
}

效果说明 #

设置完成后，点击任意颜色块就能选中对应单选框，选中的颜色块会显示深色边框和外层阴影，完美匹配你想要的高亮效果。你还可以按需调整颜色块的大小、边框样式、阴影颜色，甚至把圆形改成方形，完全适配你的设计风格。

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