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;
}

该博客文章详细介绍了它。