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

本贴最后更新于 663 天前,其中的信息可能已经物是人非

2018-12-30

回答

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

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

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

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

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

返回总目录

每天 30 秒

  • 30Seconds

    📙 前端知识精选集,包含 HTML、CSS、JavaScript、React、Node、安全等方面,每天仅需 30 秒。

    • 精选常见面试题,帮助您准备下一次面试
    • 精选常见交互,帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段,帮助你获取最佳实践
    • 精选常见代码集,帮助您提高打码效率
    • 整理前端界的最新资讯,邀您一同探索新世界
    488 引用 • 379 回帖 • 4 关注
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    158 引用 • 410 回帖
  • 面试

    面试造航母,上班拧螺丝。多面试,少加班。

    273 引用 • 1355 回帖 • 191 关注

赞助商 我要投放

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • iTanken
    捐赠者

    哇,感谢 加了特效,我要拿去用 trollface

    1 回复
  • Vanessa
    作者

    点了这么多感谢,终于被发现了

    1 回复
  • iTanken
    捐赠者

    之前都是用手机 😂 手机为啥没有

    1 回复
  • Vanessa 1
    作者

    手机是简洁设计 trollface