Why default button overrides outline on focus event?

Question

I do not know if it is a bug or not, but it seems to be.

When you have a default button and you click it when you have a :focus pseudo class it does not seem to have an outline.

#buttontag:focus {  }

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

It shows the outline when you use tab key, though.

Nevertheless, it shows the outline both when clicking or using tab key on the button if you change the background-color to it.

#buttontag:focus {    background-color: #dde;  }

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

But it does not work for all types of background-color. For example, it does not work for background-color: #ddd. In this case it is only shows when you use tab key.

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

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

Here an screenshot when the button is focused, nothing changes.

I know that the background-color: #ddd is the same colour as the default border of the button (both on focus or not focused). I have created the following code to be sure of it.

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);

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

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

I know that rgb(221, 221, 221) is the same as #DDDDDD on hex and that is the same as #ddd. I do not know if it has to be something related about contrast between both colours (there is no contrast because they are the same colour) and outline but it is very strange that in this background-color the outline does not appear.

More and more strange

If you inspect the default button and you force it to be focussed (I am trying on Google Chrome debugger) , it has an outline and shows it on the button. It is the default outline that appears in the rest of buttons with another background-color.

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

And I also wanted to know if it was something related about forcing the button to be in focus state so I created a Javascript snippet to see what outline the button has in focus state.

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

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

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

It retrieves the default outline, but does not show it. It seems that it only shows the outline if you force the button to be focussed (on the debugger).

I have searched on the official documentation but could not find anything related about a special behaviour for default buttons or specific background-color.

So here I have some questions:

• Why is the outline not displayed on the default button when you click on it?
• Why with background: #ddd it is not shown also?
• Why is the outline shown when you use tab and not when you click on the button (on the two cases above)?
• Why the button has the outline in his CSS but it does not display it? Is it a bug?

Answer 1

Might be wrong.

1. The default button (in Google Chrome at least) uses appearance style attribute:

   button {     -webkit-appearance: button; }  

   The appearance property allows you to make elements look like a standard user interface element from your operating system. Talking about OS X, standard interface buttons do not have outline by default.

   Very easy way to check how the standard os buttons looks:

   alert('I am standard button')

   When you've created a button:focus pseudo-class that contained background or border rule (example #2), you have overridden the standard appearance by default browser style for button + your rules.

   In example #1, the button:focus is empty, and apparently it is just ignored by the browser, hence os interface style is applied.

   If you will create a style:

   button { -webkit-appearance: initial; } 

   you will get default browser button that has outline.

2. Chrome's default style for button has a rule:

   background-color: buttonface; 

   Safari and Google Chrome support custom color names that are references to the currently used colors of user interface elements. It might be the case, that buttonface is '#dddddd' in your system. Interesting though, as I can see the blue outline in OS X Chrome.

For the questions 3 and 4, I am afraid I cannot replicate it, as I do get outline.

Will update the answer after some research. Cheers! :)