Menu
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.
780
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.
65
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
