CSS图片focus效果失效问题：点击图片无绿色边框的原因

为什么点击图片没触发focus效果？ #

<img> 元素默认不属于可聚焦元素，浏览器不会在点击它时自动分配焦点，所以你写的:focus样式根本不会被触发。

两种可行的解决方式 #

1. 给图片添加tabindex属性 #

通过tabindex让图片具备可聚焦能力，值设为0表示按页面自然顺序参与Tab导航，设为负数（比如-1）则仅能通过代码手动聚焦，不参与Tab键遍历：

<style>
#img1 {width: 300px;}
#img1:focus {
  border: 2px solid green;
  outline: none; /* 可选：去掉浏览器默认的焦点轮廓，避免双重边框 */
}
</style>
<img id="img1" src="test.jpg" tabindex="0"/>

2. 结合JS手动触发聚焦 #

如果只需要点击时触发focus，可以给图片添加点击事件，手动调用focus()方法：

<style>
#img1 {width: 300px;}
#img1:focus {border: 2px solid green;}
</style>
<img id="img1" src="test.jpg" onclick="this.focus()"/>

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