html - 单击后更改按钮属性的 Bootstrap CSS

Question

我正在使用 Bootstrap，我正在尝试更改按钮的颜色，但事实证明，在单击按钮并且鼠标不在其上之后，颜色再次更改为蓝色。

这是我选择的颜色:

但是单击后，如果鼠标不在“内部”，颜色将变为蓝色:

我已经更改了大部分属性，如下所示:

.btn:focus, .btn.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem #EB984E;
}
.btn-primary {
  color: #fff;
  background-color: #EB984E;
  border-color: #EB984E;
}

.btn-primary:hover {
  color: #fff;
  background-color: #EB984E;
  border-color: #EB984E;
}

.btn-primary:focus, .btn-primary.focus {
  box-shadow: 0 0 0 0.2rem #EB984E;
}

.btn-primary.disabled, .btn-primary:disabled {
  color: #fff;
  background-color: ##EB984E;
  border-color: ##EB984E;
}

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: ##EB984E;
  border-color: ##EB984E;
}

.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem #EB984E;
}

.buttons input:focus {
  outline: none;
}

整个按钮缺少什么会导致这种橙色(#EB984E)？

Answer 1

您缺少的是 :focus 伪元素和 focus 类，即

.btn-primary:focus,
.btn-primary.focus, {
  color: #fff;
  background-color: #EB984E;
  border-color: #EB984E;
}

仅供引用，您的 CSS 中有一些错误:您在某些规则中使用 ##EB984E (即双 #)，而不是 #EB984E.

另外，请引用一些关于如何设置按钮样式以实现可用性和辅助功能的注意事项:

• 您正在使用相同的悬停颜色 - 这应该是不同的颜色，以指示该按钮处于事件状态并可供单击。
• 您还可以使用与焦点轮廓相同的颜色 - 此轮廓用于显示在通过键盘使用网站时哪个按钮具有焦点。通常会使用不同的颜色来突出显示这一点，但只要清楚哪个具有焦点就可以了。

现在，您的代码按照您想要的方式运行(但我强烈建议您在实际网站中考虑上述几点):)

.buttoncontainer {
  padding: 20px;
  text-align: center;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<style>
  .btn:focus,
  .btn.focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem #EB984E;
  }
  
  .btn-primary {
    color: #fff;
    background-color: #EB984E;
    border-color: #EB984E;
  }
  
  .btn-primary:focus,
  .btn-primary.focus,
  .btn-primary:hover {
    color: #fff;
    background-color: #EB984E;
    border-color: #EB984E;
  }
  
  .btn-primary:focus,
  .btn-primary.focus {
    box-shadow: 0 0 0 0.2rem #EB984E;
  }
  
  .btn-primary.disabled,
  .btn-primary:disabled {
    color: #fff;
    background-color: #EB984E;
    border-color: #EB984E;
  }
  
  .btn-primary:not(:disabled):not(.disabled):active,
  .btn-primary:not(:disabled):not(.disabled).active,
  .show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #EB984E;
    border-color: #EB984E;
  }
  
  .btn-primary:not(:disabled):not(.disabled):active:focus,
  .btn-primary:not(:disabled):not(.disabled).active:focus,
  .show>.btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem #EB984E;
  }
  
  .buttons input:focus {
    outline: none;
  }
</style>

<div class="buttoncontainer">
  <button class="btn btn-primary">One </button>
  <button class="btn btn-primary">Two</button>
  <button class="btn btn-primary">Three</button>
</div>

(仅供引用 - CSS 不包含在代码片段的 CSS 面板中，因为它被 Bootstrap include 覆盖。)