移动端点击JavaScript翻转图片出现蓝色框问题求助

这个蓝色边框是移动端Chrome浏览器的默认焦点高亮效果，当触摸点击元素使其获得焦点时会触发。你的Codepen环境没有WordPress或WP Bakery注入的全局样式，所以不会出现，而线上站点因为主题/插件的全局CSS未针对性覆盖，导致问题出现。

以下是几种可行的解决方法：

方法1：精准覆盖焦点样式（推荐，兼顾可访问性） #

通过CSS移除点击元素的焦点轮廓，但保留键盘导航时的焦点提示（符合无障碍标准）：

/* 针对翻转图片容器和按钮 */
.flip-image:focus-visible,
.flip-button:focus-visible {
    outline: none;
}

如果上述代码无效，可提高选择器优先级（利用父容器类名）：

.image-wrapper .flip-image:focus-visible,
.image-wrapper .flip-button:focus-visible {
    outline: none !important;
}

方法2：点击后主动移除焦点 #

修改你的JavaScript函数，在翻转完成后让按钮失去焦点：

function flipImage(button) {
  var flipImageHolder = button.parentElement;
  flipImageHolder.classList.toggle("flipped");
  button.blur(); // 强制移除按钮的焦点状态
}

方法3：检查并覆盖全局焦点样式 #

有些WordPress主题或WP Bakery会设置全局焦点样式，比如：

button:focus, div:focus {
    outline: 2px solid blue;
}

你可以在主题自定义CSS中添加更精准的选择器来覆盖：

.flip-button:focus, .flip-image:focus {
    outline: none;
}

注意：尽量避免全局使用*:focus { outline: none; }，会破坏键盘导航的无障碍体验，只针对出现问题的元素做精准处理即可。

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