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.

Answer 2

When all the styles are untouched, the browser uses the host OS's given API to render the given control. This will make the control look native to the platform, but if you apply any style to that control/element, the browser cannot guarantee that the given style can be applied in the given platform, so it defaults back to a simplified, fully css solution.

Also note, that styling control elements, though works, not covered by stable standards yet.

For example, the NSButton (native control behind the button in OS X) doesn't have an option to set the background color, so the browser faces an impossible task. On Windows, you can change the background color, this is why people report not seeing your issue on Windows.