All geek questions in one place

HTML button becomes square if background color is set on Chrome for Mac

in Chrome for Mac, why do buttons become square after the background color is set (usually 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>

Web page when the mouse was not above the button:

enter image description here

Web page when the mouse is above the button:

enter image description here

The web page after the mouse was above the button:

enter image description here

How to set a background without a square button?

Thanks.

+4
source share
6 answers

WebKit/Blink "-webkit-appearance: push-button", API (Cocoa ). API . , WebKit/Blink "-webkit-appearance: push-button" CSS, - CSS, background-color.

.

+5

. , , .

.

-webkit-border-radius: 3px;
-khtml-border-radius: 3px;    
-moz-border-radius: 3px;
border-radius: 3px;

+1

css.

input#bt1{border-radius:3px; 
-moz-border-radius:3px; 
-webkit-border-radius:3px; border:none;}

input#bt1:hover{background:#ff0000; 
color:#fff}


<html>
<body>
  <input type="button" id="bt1" value="Click me!">
</body>
</html>
+1

The default button is used. Therefore, you cannot change this. And the latest version is chrome using a rounded button.

Try using this css for your button to round:

background: #fff;
border-radius: 5px;
0
source

Try defining your own design using the css button for the button ... maybe this is the default theme.

0
source

For a round corner you need to add css

<style>
  input{ background:#ccc; border-radius:6px;  border:1px solid #ccc; }
  input:hover{background:red;}
 </style>
0
source

Source: https://habr.com/ru/post/1525581/

More articles:


All Articles