无法覆盖按钮

Question

我有自举按钮。我为它添加了一个新类。改变CSS。但是当单击按钮时我无法更改css。

.btn-funds {
  border-radius: 20px;
  background-color: #efefef;
  color: #d3b431;
  height: 40px;
  text-align: left;
  padding-top: 7px;
  border: 2px solid #d3b431;
}

.btn-funds:active {
  border-radius: 20px;
  background-color: #d3b431;
  color: #efefef;
  height: 40px;
  text-align: left;
  padding-top: 7px;
  border: 2px solid #d3b431;
  box-shadow: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-12 col-sm-6 fund-text">
  <button type="button" class="btn btn-funds">More details</button>
</div>

Answer 1

您的代码未遵循该样式，因此您需要添加.btn才能正确定位按钮

.btn.btn-funds {
  border-radius: 20px;
  background-color: #efefef;
  color: #d3b431;
  height: 40px;
  text-align: left;
  padding-top: 7px;
  border: 2px solid #d3b431;
  outline: none;
}

.btn.btn-funds:active {
  border-radius: 20px;
  background-color: #d3b431;
  color: #efefef;
  height: 40px;
  text-align: left;
  padding-top: 7px;
  border: 2px solid #d3b431;
  box-shadow: none
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-12 col-sm-6 fund-text">
  <button type="button" class="btn btn-funds">More details</button>
</div>

Answer 2

试

.btn-funds {
    outline: 0;
}

因为蓝色边框不是边框，而是轮廓。这就是为什么它不会改变。 我希望这有帮助！