search

arco-design / arco-design-vue

A Vue.js 3 UI Library based on Arco Design
https://arco.design/vue
MIT License
2.69k stars 526 forks source link

按钮 Button 组件在火狐浏览器上的样式问题，会出现描边 #1700

Open liaorg opened 2 years ago

liaorg commented 2 years ago

Basic Info

What is expected?

希望修复样式

Steps to reproduce

在火狐浏览器使用点击 Button 组件 其他组件，标签页 Tabs，开关 Switch，数据穿梭框 Transfer，上传 Upload 要点击的地方也要出现类似问题

hehehai commented 2 years ago

@liaorg hi, 这是元素 focus-visible 伪类样式所影响的，是符合组件的设计规范的。这不是 Firefox 独有的，通常使用 tab 切换元素 tabindex 时会出现。如果不需要该样式，可以覆盖 元素的 foucs-visible 样式。

image

switch 组件的这个 点线的 outline 也是同样的问题（这个仅是在 Firefox 下存在）。

image

点线的 outline 问题替换样式参考

image