Some buttons have: focus style applied when pressed

Question

Why do some buttons get: the focus style is applied when you click on them, and some not? For example, angular -ui modal close buttons to apply, but try the W3Schools Button Element , and it doesn’t.

EDIT: I reopen this question. Forgive me, I forgot a little about it, because I really decided that it was resolved until yesterday, when I really tried it. So I did something like this: .btn:focus:not(:active) { outline: none;} , but the problem is that then it also does not show focus when using the tab button. And generally forget about bootstrap, right?

It seems that the focus effect becomes visible when the button is pressed, when the background-color property for :focus differentiates by default. Perhaps this is true for some other properties.

So - if background is the default, you can only see the focus effect when using the tab key or manually setting it to :focus . If the background parameter is different, you can see the effect also when pressed. The plunker demonstrates this: https://plnkr.co/edit/2eKrtwl2wZcj3Ty4JJSu?p=preview

Maybe I answered my own question, maybe not, I don’t know.

edit2: Just saw @musically_ut edit, giving almost the same example.

UPDATE

After discussing with @ Error404, I can clarify the question more precisely. Therefore, the question arises: why the button outline style is not displayed when it was pressed ?

See “click” in bold because it doesn't work just when clicked. It works when it focuses on it using the keyboard keys of the tab ; it works when manually configured using the developer tools.

Basically, all the answers still claim that when he clicks, he generally loses or does not have focus, but he does. You can change the button background or border and possibly some other property, and suddenly, when you click on it, you will see a diagram. Or you can change the outline to something else in the rule :focus , and it will also show.

Answer 1

angular -ui is based on CSS bootstrap, which manages a lot of little things for style.

W3C example is just html without applying any style.

Answer 2

angular -ui modal probably has extra CSS that creates the: focus selector behavior, while the W3 school doesn't.

Answer 3

:focus pseudo-class follows the element that focuses on the page . It can be a button or a link input , textarea , <a> or any other element that can be Tabbed to (see the tabindex attribute ) or the specified focus otherwise (touch, mouse clicks, etc.).

In the angular-ui example, nothing removes focus from the button after clicking. However, at W3, focus is stolen in the warning box. Therefore, <button> loses the :focus pseudo-class.

---

Curioser and curioser.

It looks like in Chrome, at least the CSS background-color property on the button:focus should be something other than #ddd so that the button will keep focus after clicking.

Demo: http://codepen.io/musically_ut/pen/eZjWeq

Answer 4

After your comments, I think you're looking for the reason the button with background-color: #ddd; does not have outline .

 button.buttontag:focus { background-color: #ddd; } 

 <button class="buttontag" type="button">Focus me</button> 

The main reason that I think of is that it is not outline what you are looking for, because if you turn it off on the button with a different background-color , the focus effect will still appear.

 button.buttontag:focus { background-color: #dde; outline: none; /* I also proved with 0 */ -webkit-box-shadow: none; } 

 <button class="buttontag" type="button">Focus me</button> 

This seems to be a special border, because if you set a different border, this is the only way this special border for focus will disappear.

 button.buttontag:focus { background-color: #dde; outline: 0; -webkit-box-shadow: none; border: 1px solid orange; } 

 <button class="buttontag" type="button">Focus me</button> 

I was wondering why this is happening, maybe #ddd is the special default border color, which was the main question I had in mind. So let's find out what color the border has.

 var buttontag = document.getElementById('buttontag'); buttontag.onfocus = function(){ var border = window.getComputedStyle(buttontag).getPropertyValue("border"); alert(border); } var border = window.getComputedStyle(buttontag).getPropertyValue("border"); alert(border); 

 button {} :focus {background-color: #ddd } 

 <button id="buttontag" type="button">Focus me</button> 

It does not matter if it is in focus or not, it will always have the color rgb(221, 221, 221) on the border, which is equivalent to #DDDDDD in hexadecimal format, and this is the same as #ddd .

We have this: The reason it does not seem that this button is in focus when it has background-color: #ddd; , because it has the same border colour as background-color , so it has no contrast between them ( background-color and border ).

Remember: the onfocus event simply detects when the focus event fires on the button (or other focused element). It has no link to anything about CSS , it just receives the event, but it has nothing to do with CSS . It may have the default values ​​set by the browser on the custom item.

Is this the reason that if you change the background-color to button , it produces the effect as if you clicked on button because both values ​​are different and they make a contrast between them. If you set the same background-color , you will never feel that the button is pressed.

Answer 5

: focus is a pseudo-class that is used by tools like jQuery to fire events, apply CSS styles, etc. Looking at the examples you provided, I don't see an explicit set: focus. When a button is clicked, jQuery will interpret the button as: focus. The vanilla HTML button will not have this.

Answer 6

I had this problem with my whole AngularJs application, I usually remove focus from the buttons when I click, I know that it is a hack, but it works: D.

 $('.btn').click(function(){ $(this).blur(); }); 

Answer 7

If you don’t want to show the focus scheme below the code snippet,

 <button type="button" tabindex="-1">Click Me!</button> 

OR

  :focus {outline:none;} 

And if you want to pounce on focus, use the code snippet below,

  :focus {outline: 1px solid #5B9DD9} 

Other styles (like background or border, etc.) that you can use as you want. Hope this helps, if in doubt let me know.

thanks

UPDATE:

What I noticed when checking a button through Inspect Element and triggering: focus, the button gets style

 :focus { outline: -webkit-focus-ring-color auto 5px; } 

However, this does not create a diagram on the button.

After debugging and reading some pages on the Internet, I find out that the focus on the button appears only when you press the keyboard, because at first it was necessary to show which element is focused, and now it’s clear with the mouse what focuses because you actively move the mouse to the button