google-web-designer - Google Web Designer - 视频组件（点击时）- 移除蓝色边框

Question

我使用 Google Web Designer 创建了一个非 Google 广告横幅，并使用了视频组件来显示视频。一切正常。

辅助功能，当点击视频组件播放或暂停视频时会出现蓝色边框。

我添加了以下代码来隐藏蓝色边框，但它没有帮助。

.gwd-video-1ggs:focus, .gwd-video-1ggs:active {
    outline: none !important;
    box-shadow: none !important;
}

它只发生在 Chrome 浏览器中，而不发生在 Safari 中。有没有潜在的解决方案？

Answer 1

解决了

我关注了这篇文章 - [ https://nelo.is/writing/styling-better-focus-states/][1]

添加以下代码以删除蓝色边框。

*:focus:not(.focus-visible) {
    outline: none;
}
.focus-visible {
    outline-color: lightgreen;
}

博客文章详细解释了它。