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<

Answer 1

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.