Why do some buttons get :focus style applied when clicking them and some don't? For example, angular-ui modal close buttons have it applied, but try W3Schools button element and it doesn't.
EDIT: I am reopening this question. Forgive me, I had forgotten a bit about this, because I really tought that it was solved until yesterday I really tried it out. So I did something like this: .btn:focus:not(:active) { outline: none;}
, but the problem is that then it also doesn't show focus when using tab
button. And forget about bootstrap at all, it's not it!
It seems that the focus effect becomes visible on button click when it's background-color
property for :focus
is defferent from default. Maybe true for some other properties as well.
So - if the background
is default, then you can see focus effect only when using tab
key or setting it to :focus
manually. If the background
is different, you can see the effect also on click. Plunker demonstrating this: https://plnkr.co/edit/2eKrtwl2wZcj3Ty4JJSu?p=preview
Maybe I have answered my question myself, maybe not, don't know.
edit2: Just saw @musically_ut edit giving almost the same example.
UPDATE
After discussion with @Error404, I can clarify the question more precisely.
So the question is - why default button
's outline
style is not showing when it has been clicked?
See "clicked" in bold, because it is not working only on click. It works when focusing on it using keyboards tab
key, it works when setting it manually with developer tools.
Mostly all answers so far argue that it loses or doesn't have focus at all when clicked, but it does. You can change button
's background
or border
and probably some other property too and suddenly, when you click it, you see the outline. Or you can change the outline
itself to something else in :focus
rule and it will show also.
angular-ui is based on Bootstrap css framework that manage lot's of little things for style.
THe W3C example is only html without any kind of style applied.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With