如何使用图片替代单选按钮？附现有HTML与CSS代码

你的思路已经很对了——隐藏原生单选框，用图片来触发选择并展示状态。我来帮你完善代码，分两种方案供你选择：

方案一：调整HTML结构（兼容性最好） #

先把label里的input放到img前面，这样可以用相邻兄弟选择器轻松控制选中状态：

优化后的HTML #

<div class="radio-line">
  <label>
    <input type="radio" name="choice1" value="1"/>
    <img src="img/black.jpeg" alt="黑色选项" />
  </label>
  <label>
    <input type="radio" name="choice1" value="2"/>
    <img src="img/blue.jpg" alt="蓝色选项" />
  </label>
</div>

完整CSS代码 #

/* 基础图片样式 */
img {
  width: 20vw;
  height: 20vw;
  padding: 2vw;
  /* 加过渡动画，让状态切换更丝滑 */
  transition: all 0.3s ease;
  /* 可选：默认加个透明边框，和选中状态区分 */
  border: 2vw solid transparent;
}

/* 隐藏原生单选框 */
input[type=radio] {
  display: none;
}

/* 鼠标悬停效果 */
img:hover {
  opacity: 0.7;
  cursor: pointer;
}

/* 单选框选中时，对应的图片样式 */
input[type=radio]:checked + img {
  /* 选中时显示蓝色边框 */
  border-color: #2196F3;
  padding: 0; /* 抵消原有padding，保持图片整体尺寸不变 */
  opacity: 1;
}

方案二：不调整HTML结构（用CSS :has()伪类） #

如果不想改动HTML，可以用CSS的:has()伪类（现代浏览器均支持，包括Chrome、Firefox 121+、Safari 15.4+）：

你的原有HTML保持不变 #

<div class="radio-line">
  <label>
    <img src="img/black.jpeg" />
    <input type="radio" name="choice1" value="1"/>
  </label>
  <label>
    <img src="img/blue.jpg" />
    <input type="radio" name="choice1" value="2"/>
  </label>
</div>

对应的CSS #

img {
  width: 20vw;
  height: 20vw;
  padding: 2vw;
  transition: all 0.3s ease;
  border: 2vw solid transparent;
}

input[type=radio] {
  display: none;
}

img:hover {
  opacity: 0.7;
  cursor: pointer;
}

/* 当label包含选中的单选框时，修改内部img样式 */
label:has(input[type=radio]:checked) img {
  border-color: #2196F3;
  padding: 0;
  opacity: 1;
}

关键原理说明 #

• <label>标签和内部的<input>是关联的，点击label内的任何元素（包括图片）都会触发单选框的选中/取消状态；
• 通过隐藏原生单选框，用图片完全替代它的视觉表现；
• 利用CSS伪类（:checked、:has()）来检测单选框的选中状态，进而修改对应图片的样式，实现选中反馈。

你可以根据自己的需求调整选中样式——比如用阴影替换边框、改变图片透明度、添加勾选图标等等，都可以在选中状态的CSS里修改。

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