css - 在 safari 浏览器中单击时,bootstrap vue(b-tabs)显示蓝色轮廓
问题描述
我正在使用引导 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's 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/
or::v-deep
组合符 - 两者都是别名>>>
并且工作方式完全相同。
<style scoped>
.tabs /deep/ .tab-pane:focus {
outline: none;
}
</style>
这将转换为以下(或类似):
.tabs[data-v-f3f3eg9] .tab-pane:focus { outline: none; }
请注意,[data-v-xxxxx]
属性选择器仅适用于根类选择器,而不适用于任何子类选择器。
推荐阅读
- c# - Update() 和 FixedUpdate() 之间有什么区别,应该如何将这些区别应用于控制运动?
- javascript - 如何禁用滚动功能?
- r - R:使用经度/纬度的散点
- docusignapi - 在单个 API 调用中获取文档信封状态和收件人
- mysql - 如何按顺序连接行而不重复
- java - 当有 3 个客户端连接到 java 中的服务器时,在服务器中运行一些特定代码
- python - 如何将 KeyManager 添加到使用 moto 模拟的 kms 密钥中
- javascript - 使用croppie.js 裁剪上传的图像并保存为jpeg
- python - ValueError:在 PIL 中混合图片时图像不匹配
- c# - 从带参数的字符串调用函数