React Select可搜索的下拉蓝色轮廓

时间:2018-06-27 18:14:04

标签: css reactjs sass react-select

选择;当下拉列表可搜索时,光标周围会出现一个蓝色轮廓:

https://ibb.co/faG4X8

我可以使用以下方法摆脱光标:

.Select-input > input {
    color: transparent;
  }

我还如何摆脱焦点上的蓝色轮廓

谢谢

mihai

1 个答案:

答案 0 :(得分:0)

您是正确的,outline: 0outline: none会在元素聚焦时删除蓝色轮廓。

那是来自浏览器的默认样式表。每个浏览器都以某种方式实现焦点状态指示器。

我提醒您注意焦点指示对于可访问性很重要。如果删除了默认样式,最好将其替换为元素已聚焦的其他视觉指示器。如果不进行此更改,如果有人正在使用键盘或其他潜在的非传统访问方法,它几乎不可能遍历该站点。

根据html5规范-

  

”……如果没有替代的焦点样式,则主要用于使用键盘浏览页面的人或视力不佳的人使用焦点轮廓来帮助他们浏览页面的页面将大大减少可用性。 ”

更多阅读:Stop messing with the browsers default focus outline