Sym - 一个用 Java 实现的现代化社区平台 • 源码注册

Pipe - 小而美的开源博客平台 • 体验皮肤
Solo - 一个用 Java 实现的博客系统,为你或你的团队创建个博客吧! • 源码下载
Wide - 一个基于 Web 的 Go 语言 IDE • 教程试用

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

2018-12-30

回答

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

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

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

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

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

返回总目录

每天 30 秒


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

3 评论
Tanken • 2018-12-31
回复 删除

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

Tanken • 2018-12-31
回复 删除

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

Vanessa • 2019-01-01
回复 删除

手机是简洁设计 trollface