osx - HTML button becomes square after background color is set on Chrome for Mac -


on chrome mac, why buttons become square after background color set (normally 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 mouse has not been on button:

enter image description here

the web page when mouse on button:

enter image description here

the web page after mouse on button:

enter image description here

how set background without making button square?

thanks.

webkit/blink draws buttons "-webkit-appearance:push-button", draws buttons native api (cocoa in case). native api doesn't support arbitrary background colors. webkit/blink automatically removes "-webkit-appearance:push-button" internally , falls poor css drawing if web author specifies css properties such background-color.

you can't change background color native button appearance.


Comments

Popular posts from this blog

python - Subclassed QStyledItemDelegate ignores Stylesheet -

java - HttpClient 3.1 Connection pooling vs HttpClient 4.3.2 -

SQL: Divide the sum of values in one table with the count of rows in another -