隐藏Elementor中Floating Element浮动元素的焦点边框

最近的一个wordpress外贸建站项目中用到了Elementor编辑器的Floating Element浮动元素，但是我发现这个模块前端的显示似乎有点问题。

如上图所示，当前端首次打开Floating Element浮动元素弹窗时，它显示一个一个默认的边框，这个后台我没有设置，也没有设置的地方。只要点一下鼠标，这个框就消失了，一般情况下不那么抠细节那就问题不大，可以不管。如果要处理的话就继续看下面吧。

问题原因

这个东西我也是第一次遇到，最开始估计和是Elementor近期新版本或浏览器本身有关。经过查询了解到，这个东西应该是浏览器默认的焦点轮廓（outline）。这个黑框在用户点击或使用Tab键导航时会自动出现，目的是为了无障碍访问，让键盘用户能看到当前聚焦的元素。

处理方法

/* 针对所有可能的Floating Element焦点状态 */
.e-contact-buttons *:focus,
.e-contact-buttons *:focus-visible,
.e-contact-buttons *:focus-within {
    outline: none !important;
    box-shadow: none !important;
}

/* 特别针对弹窗打开时的状态 */
.e-contact-buttons__content-wrapper[aria-hidden="false"],
.e-contact-buttons__chatbox[open] {
    outline: none !important;
}

要隐藏这个边框最简单的方法还是用CSS，也更安全一点。大家可以直接复制上面的代码。

打开你的Floating Element浮动元素模块，进入编辑页面。然后打开【高级设置~Custom CSS】，把上面的CSS代码粘贴进去就，然后更新页面就可以了。

最后打开前端页面，可以刷新浏览器或清空一下缓存，此时那个默认的边框就消失了。