为什么有些按钮会得到:单击它们时应用了焦点样式,而有些则没有?例如,angular-ui modal关闭按钮应用了它,但是尝试W3Schools button element却没有。
编辑:我正在重新打开这个问题。原谅我,我有点忘了这件事,因为直到昨天我才真正尝试解决。所以我做了这样的事情:.btn:focus:not(:active) { outline: none;}
,但问题是,当使用tab
按钮时,它也不会显示焦点。忘了自举吧,不是这样的!
当background-color
的属性与默认值不符时,单击按钮时焦点效果似乎可见。对于其他一些属性也可能是这样。
所以-如果:focus
是默认值,那么只有在使用background
键或将其手动设置为tab
时才能看到焦点效果。如果:focus
不同,单击时也可以看到效果。普朗克证明了这一点:https://plnkr.co/edit/2eKrtwl2wZcj3Ty4JJSu?p=preview
也许我自己回答了我的问题,也许没有,不知道。
edit2:刚才看到@musically\u ut edit给出了几乎相同的例子。
更新
在与@error404讨论之后,我可以更准确地澄清这个问题。
所以问题是-为什么单击后默认的background
样式没有显示?
请参阅粗体的“clicked”,因为它不只在click上工作。当使用键盘button
key聚焦它时,它工作,当使用开发人员工具手动设置它时,它工作。
到目前为止,大多数答案都认为它在点击时会失去或根本没有焦点,但它确实如此。您可以更改outline
的tab
或button
以及其他一些属性,当您单击它时,可能会突然看到大纲。或者您可以在background
规则中将border
本身更改为其他内容,它也会显示出来。
最佳答案
AngularUI是基于引导CSS框架的,它可以管理很多小东西来实现风格。
W3C示例只是HTML,没有应用任何类型的样式。