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