移动端实现<label>内<img>按压视觉反馈的纯CSS方案

嘿，我明白你遇到的问题了——用:focus伪类给<label>加反馈没效果，其实核心原因是**<label>默认不是可聚焦元素**，而且移动端触摸场景下，:active才是更适合触发按压状态的伪类。下面给你一个基于高兼容属性的纯CSS最简方案：

问题根源分析 #

• <label>本身没有默认的聚焦行为，所以.pop:focus不会被触发，除非给它加上tabindex属性让它成为可聚焦元素。
• 移动端触摸操作优先触发:active伪类，单纯用:focus覆盖不到触摸按压的场景。

最简解决方案 #

我们结合tabindex让<label>可聚焦，同时用:active+:focus伪类覆盖触摸和键盘聚焦场景，再通过transition实现平滑的淡入淡出效果：

HTML 修改

给<label>添加tabindex="0"和class="pop"：

<label class="pop" tabindex="0" style="height:50px;width:50px">
  <img src="test.svg" width="30" height="30" style="cursor:pointer">
</label>

CSS 代码

.pop {
  /* 去掉默认焦点轮廓，可选（如果需要自定义焦点样式可以替换） */
  outline: none;
}
/* 同时覆盖触摸按压(:active)和键盘聚焦(:focus)场景 */
.pop:active img,
.pop:focus img {
  opacity: 0.5;
}
/* 添加过渡动画，实现平滑的淡入淡出 */
.pop img {
  transition: opacity 0.15s ease;
}

兼容性说明 #

• tabindex：所有浏览器（包括移动端）完全支持。
• :active/:focus：支持所有现代浏览器及移动端浏览器（iOS Safari、Android Chrome等）。
• transition：支持度超过98%，覆盖几乎所有主流移动端设备。

这样修改后，移动端按压<img>时会立刻降低透明度，松开后平滑恢复，完美实现你想要的视觉反馈～

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