如何在不更改默认样式的情况下更改按钮的背景颜色

问题描述 投票：0回答：1

我尝试仅修改 HTML 按钮的背景颜色，但是当我进行更改时，它也会影响边框的半径、粗细和颜色。见这里。谁能解释一下发生了什么以及我该如何解决它

我尝试使用继承、无、未设置、初始、默认或恢复关键字，但没有任何效果

javascript html css reactjs button
1个回答
0
投票

我认为如果你想完全删除边框，你可以为该按钮设置

border:none
。现在更改该按钮的 
background-color
不会影响 
border
属性。

如果您想保留边框，请设置一些边框属性，例如 

border: solid red 2px;
，现在它不会更改按钮边框属性。

<!DOCTYPE html>
<html>
  <head>
    <title>Change Button Background Color on Click</title>
    <style>
      button {
        background-color: blue;
        color: white;
        border: none;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <button onclick="changeColor()">Click me</button>
    <script>
      function changeColor() {
        var randomColor = Math.floor(Math.random() * 16777215).toString(16);
        document.querySelector('button').style.backgroundColor =
          '#' + randomColor;
      }
    </script>
  </body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.