css - why does changing the `background-color` of a button change other styles too?

Question

http://codepen.io/anon/pen/KwKOaz

Changing only the background-color significantly changes the style on a button element, specifically the border style.

This happens on chrome, safari, and firefox on a Mac. Why does this happen? How can I safely change its background color?

Answer 1

Browser vendors apply custom styling to UI elements like buttons and input fields. Altering one of these overwritten attributes results in disabling all of the other vendor styles on that element as well. If you want to change one attribute, you have to alter the others as well, I'm afraid.

Unfortunately I can't tell you why they do this - probably there is might be some spec behind, but I cannot find any evidence for that.