如何用纯 CSS 实现选中单选按钮时自动高亮对应图片-html教程-PHP中文网

本文介绍一种无需 JavaScript 的简洁方案：利用 CSS :has() 伪类选择器，根据单选按钮（input[type="radio"]）的选中状态，精准定位并修改其同级元素的 filter: grayscale() 效果。

本文介绍一种无需 javascript 的简洁方案：利用 css `:has()` 伪类选择器，根据单选按钮（`input[type="radio"]`）的选中状态，精准定位并修改其同级 `` 元素的 `filter: grayscale()` 效果。

在构建头像选择器等交互组件时，常需实现“选中某单选按钮 → 对应图片取消灰度”的效果。传统思路往往依赖 JavaScript 获取父容器、遍历 DOM、操作样式，不仅代码冗长，还易因结构变更（如嵌套层级调整）而失效。

其实，现代 CSS 提供了更优雅、声明式且性能更优的解决方案：:has() 选择器。它允许我们基于后代或兄弟元素的状态反向影响祖先/同级元素的样式。关键在于合理组织 HTML 结构——将 <input> 和 <img> 置于同一 <label></label> 内（语义正确且天然可点击），即可用一行 CSS 精准控制：

label:has(input:checked) img {
  filter: grayscale(0);
}

配合默认灰度样式：

.avatar-img-select {
  height: 52px;
  filter: grayscale(1); /* 初始全灰 */
}

完整示例 HTML 结构如下（注意 <img> 在 <input> 之前，但顺序不影响 :has() 匹配）：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

<div class="row first-screen-row-avatar">
  <div class="col select-avatar-col">
    <label for="avatar1">
      @@##@@
      <input type="radio" id="avatar1" name="hero-avatar" value="assets/images/avatars/hero-avatar-1.jpg" required></label>
  </div>
  <div class="col select-avatar-col">
    <label for="avatar2">
      @@##@@
      <input type="radio" id="avatar2" name="hero-avatar" value="assets/images/avatars/hero-avatar-2.webp" required></label>
  </div>
</div>

✅ 优势总结：

零 JS：完全脱离脚本，减少运行时开销与维护成本；
强健性高：不依赖 ID、class 或特定 DOM 层级，仅依赖语义化 <label></label> 包裹关系；
可扩展性强：新增选项只需复制 <label></label> 块，无需修改 CSS 或 JS；
无障碍友好：<label></label> 天然支持屏幕阅读器与键盘焦点。

⚠️ 注意事项：

:has() 已获 Chrome 105+、Firefox 121+、Safari 15.4+ 全面支持（CanIUse 数据），若需兼容旧版 IE 或较老浏览器，可回退至 JavaScript 方案（推荐使用 closest('label') + querySelector('img') 替代已废弃的 .parentElement() 链式调用）；
确保 <input> 与 <img src="assets/images/avatars/hero-avatar-1.jpg" class="avatar-img-select" alt="Avatar 1"> 同属一个 <label></label>，这是 :has() 能匹配的前提；
避免在 :has() 中使用过于复杂的选择器（如深层嵌套），以免影响渲染性能。