Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Some buttons have :focus style applied on click

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.

like image 221
Jānis Avatar asked Apr 21 '16 13:04

Jānis


1 Answers

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.

like image 188
rick Avatar answered Sep 21 '22 09:09

rick