我正在使用bootstrap vue组件,在safari浏览器中单击后,b-tabs显示轮廓蓝色焦点边框,它在chrome和Mozilla上正常工作
我试过了
*:focus {outline:none !important}
b-tabs
默认情况下,启用了键盘导航,以使选项卡组件仅可由键盘和屏幕阅读器用户访问。针对选项卡式内容的WAI-ARIA建议建议为选项卡的内容区域指定tabindex,-1
以便屏幕阅读器用户可以轻松跳至该区域。
您可以使用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:
使用
scoped
,父组件的样式不会泄漏到子组件中。但是,子组件的根节点将同时受父组件的作用域CSS和子组件的作用域CSS的影响。这是设计使然,以便父级可以为子级根元素设置样式以进行布局。
https://vue-loader.vuejs.org/guide/scoped-css.html#child-component-root-elements:
如果希望作用域样式中的选择器“较深”,即影响子组件,则可以使用
>>>
组合器。[...]
一些预处理器(例如Sass)可能无法
>>>
正确解析。在这些情况下,您可以改用/deep/
或::v-deep
组合器-两者都是它们的别名,>>>
并且工作原理完全相同。
<style scoped>
.tabs /deep/ .tab-pane:focus {
outline: none;
}
</style>
这将被转换为以下内容(或类似内容):
.tabs[data-v-f3f3eg9] .tab-pane:focus { outline: none; }
注意,[data-v-xxxxx]
属性选择器仅应用于根类选择器,而不应用于任何子类选择器。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句