CODEWITHSUNDEEP
htmlcss
Daan van Hulst
Daan van Hulst

Reputation: 1436

Setting a button border-radius makes for focus on click

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?

Upvotes: 0

Views: 1370

Answers (1)

J Davies
J Davies

Reputation: 289

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.

Upvotes: 1

Related Questions