focus 有什么效果？应该怎么正确处理他们？

2018-12-30

回答

像按钮或锚点标记等元素被选中时，该元素的外围就会出现轮廓。不同浏览器会呈现不同的效果，但一般是在元素周围显示蓝色的轮廓来表示他已经被选中。

过去，很多人使用 outline: 0 来移除元素被选中的效果。但是，这会让键盘侠们感到很不友好，因为选中效果被移除了。但是如果不移除的话，元素外围的蓝色轮廓有时候会让大多数人感觉不够舒适美观。

Bootstrap 等 UI 框架一般采用更加美观的 box-shadow 来代替默认的选中效果。然而，这在某些浏览器上（如 Firefox）对鼠标用户来说却不够完美，使用鼠标点击按钮元素时 :focus 的效果并不能展现。

在这方面浏览器之间存在了太多的不一致及兼容问题，想要完美的解决此问题，目前看来只能选择使用 JavaScript 了。这样才能对鼠标用户和键盘用户保持友好及美观。不论当用户使用键盘还是鼠标，在选中元素时就需要呈现一致的效果，当失焦后，效果就需要消失。

当然，如果你只需要兼容 Chrome 67 以上的版本，你可以忽略这一点。除此之外 :focus-within 在这方面也是一个扩展的不错的伪类。

返回总目录

每天 30 秒