如何在 HTML/CSS 中编辑按钮的活动颜色答案

【问题标题】：How to edit active color of button in HTML/CSS如何在 HTML/CSS 中编辑按钮的活动颜色
【发布时间】：2020-06-17 21:18:16
【问题描述】：

我有以下代码：

<button type="button" class="btn btn-success" onclick="validateForm()">Book appointment</button><br><br>
<p id="submitted" style="background:black"><p>

黑色是按钮，绿色是活动按钮。如何更改此按钮的活动颜色？我尝试了多种方法，例如：

.btn.btn-success:active{
background: #933A16;
}

或者

btn.btn-success:active{
    color #933A16;
    }

或者

.btn:active{
  color: #933A16;
}

而且没有任何效果。它一直显示为绿色。我不会在 CSS 文件的其他任何地方显示绿色。

【问题讨论】：

标签： html css button bootstrap-4

【解决方案1】：

首先，我认为您想使用background-color 或background，我看到您在第一个示例中使用background，但在接下来的两个示例中使用color。您也可以尝试在分号前添加 !important 语句以覆盖引导程序的设置。

如果您希望更改每个按钮的活动颜色，那么您应该喜欢 Theming Bootstrap：https://getbootstrap.com/docs/4.0/getting-started/theming/#color

如果你只想修改这个按钮，你可以为它添加一个自定义类：

<button type="button" class="btn btn-success custom-class" onclick="validateForm()">Book appointment</button><br><br>

.custom-class:active {background-color: green !important;}

【讨论】：

【解决方案2】：

与 Burela 所说的类似 - 添加 '!important' 将覆盖 Bootstrap 的默认值，因此，如果您将背景颜色（而不仅仅是背景）设置为您想要的 !important 最后，这就是使用。这样做是一个新的类。此外，“颜色”用于字体，而不是实际的按钮。

【讨论】：

【解决方案3】：

定义启用和禁用的样式。
为您的按钮分配和 ID。

<button id="btnId" ...>

在函数主体中，添加以下行以更改按钮样式。

document.getElementById("btnId").className = "button disabled";

查看以下示例：

<html>

<head>
  <style>
    .button {
      background-color: #4CAF50;
      /* Green */
      border: none;
      color: white;
      padding: 15px 32px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin: 4px 2px;
      cursor: pointer;
    }
    
    .disabled {
      opacity: 0.6;
      cursor: not-allowed;
      background-color: black;
    }
  </style>
</head>

<body>

  <button class="button">Normal Button</button>
  <br>
  <button class="button disabled">Disabled Button</button>
  <br>
  <button id="btnId" onclick="validateForm()" class="button">Click once to disable</button>


  <script>
    function validateForm() {
      <!-- Do validation -->
      document.getElementById("btnId").innerHTML = "YOU CLICKED ME! I'm disabled now";
      document.getElementById("btnId").className = "button disabled";
    }
  </script>

</body>

</html>

【讨论】：