0

I'm seeing some odd behaviour concerning standard HTML buttons on Chrome. A standard button does not add an outline when clicked; only on focus through keyboard.

<button type="button">Works as expects</button>

As soon as I add styling with border-radius, the button will get an outline when clicked.

<button type="button" style="border-radius: 5px;">Focus on click</button>

Does anyone know what makes the button behave this way? And how can I make sure that the outline only gets added on keyboard navigation using the border-radius?

Daan van Hulst
  • 1,426
  • 15
  • 32
  • This question has been discussed in detail here: https://stackoverflow.com/questions/20340138/remove-blue-border-from-css-custom-styled-button-in-chrome – code-orange Apr 12 '18 at 15:11
  • The question you link to is about removing the outline all together, and its repercussions. I don't see anything about: 'As soon as I add styling with border-radius, the button will get an outline when clicked.'. – Daan van Hulst Apr 23 '18 at 14:08

1 Answers1

1

In response to the first part of the question: If you right click on the round button, click inspect, and click the computed tab you can see that by adding styling it has overridden the platform-native styling:

-webkit-appearance: button;

has changed to:

-webkit-appearance: none;

the button's background-color change (when you hold down click) is also lost.

Koby Douek
  • 16,156
  • 19
  • 74
  • 103
J Davies
  • 219
  • 1
  • 7