我创建了一些代码的一些翻转的图像与超文本标记语言，css，和一些脚本.代码运行得很完美，但当我在移动设备上访问实时网站时，我面临着一个美学问题:当你点击其中一张图片时，图片周围很快就会出现一个蓝色的方框.
奇怪的是，这个问题只出现在实时站点上(编辑:见下图以供参考)，而不是Codepen Demo(实时站点上更改了一些次要的css方面，但没有任何应该影响此行为的内容).这让我认为这可能与WordPress或WP Bakery生成的另一个CSS/Java脚本有关.
有什么办法可以避免蓝盒子出现吗？
`<div class="image-wrapper">
<div class="flip-image--holder">
<div class="flip-image" id="diana--front" onclick="flipImage(this)">
<button class="flip-button">
<i class="fa-solid fa-repeat" style="color: #99cc00;"></i>
</button>
</div>
<div class="flip-image flip-image--back" id="diana--back" onclick="flipImage(this)">
<button class="flip-button">
<i class="fa-solid fa-repeat" style="color: #99cc00;"></i>
</button>
</div>
</div>
</div>
<script>
function flipImage(button) {
var flipImageHolder = button.parentElement;
flipImageHolder.classList.toggle("flipped");
}
</script>`
老实说，我不知道从哪里开始解决这个问题.我最好的猜测是它是与css相关的东西.
我正在使用Chrome和Android 14手机.
The issue looks like this: 