css - bootstrap vue (b-tabs) 在 safari 浏览器中单击时显示蓝色轮廓

Question

我正在使用 bootstrap vue 组件，在 safari 浏览器中单击后 b-tabs 显示轮廓蓝色焦点边框，它在 chrome 和 Mozilla 上运行良好

我试过了

*:focus {outline:none !important}

Answer 1

b-tabs 默认启用键盘导航，使选项卡组件仅供键盘和屏幕阅读器用户访问。 WAI-ARIA 对选项卡式内容的建议建议为选项卡的内容区域指定 -1 的 tabindex，以便屏幕阅读器用户可以轻松跳转到该区域。

您可以使用 no-key-nav 属性禁用键盘导航(这也会从选项卡内容区域中删除 -1 的 tabindex)。

https://bootstrap-vue.js.org/docs/components/tabs#keyboard-navigation

如果使用样式/类来移除轮廓，并且你的样式是有范围的，你需要使用 vue-loader 的 Deep selector ，因为通常你不能在你的组件中定位子组件的子元素:

https://vue-loader.vuejs.org/guide/scoped-css.html#child-component-root-elements :

With scoped, the parent component's styles will not leak into child components. However, a child component's root node will be affected by both the parent's scoped CSS and the child's scoped CSS. This is by design so that the parent can style the child root element for layout purposes.

https://vue-loader.vuejs.org/guide/scoped-css.html#child-component-root-elements :

If you want a selector in scoped styles to be "deep", i.e. affecting child components, you can use the >>> combinator.

[...]

Some pre-processors, such as Sass, may not be able to parse >>> properly. In those cases you can use the /deep/ or ::v-deep combinator instead - both are aliases for >>> and work exactly the same.

<style scoped>
.tabs /deep/ .tab-pane:focus {
  outline: none;
}
</style>

这将被转换为以下(或类似):

.tabs[data-v-f3f3eg9] .tab-pane:focus { outline: none; }

请注意，[data-v-xxxxx] 属性选择器仅应用于根类选择器，不适用于任何子类选择器。