HTML button becomes square after background color is set on Chrome for Mac
button, google-chrome, html, macos
Solution
WebKit/Blink draws buttons as "-webkit-appearance:push-button", which draws buttons with the native API (Cocoa in this case). However the native API doesn't support arbitrary background colors. So WebKit/Blink automatically removes "-webkit-appearance:push-button" internally and falls back to poor CSS drawing if a web author specifies some CSS properties such as background-color.
You can't change background color with the native button appearance.
Problem
on Chrome for Mac, why the buttons become square after background color is set (normally it is rounded)? ``` <html> <body> <input type="button" id="bt1" value="Click me!" onmouseover="this.style.backgroundColor='red;'" onmouseout="this.style.backgroundColor='transparent';"> </body> </html> ``` The web page when the mouse has not been over the button: The web page when the mouse is over the button: The web page after the mouse was over the button: How to set the background without making the button square? Thanks.