如何覆盖 Bootstrap 中主按钮的样式

Question

如果我单击单选按钮，我想更改背景颜色。

.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus {
  background-color: black !important;
  color: white !important;
}

.btn-primary {
  color: black;
  background-color: white;
  width: 100%;
}

<div class="btn-group">
  <div class="radiobuttonWidth">
    <p-radioButton [somethink]="some"> </p-radioButton>
  </div>
</div>

悬停效果有效，但活动效果无效

Answer 1

这对我有用。请检查您是否在引导样式导入后定义了 style.css 并使用!important覆盖引导样式。

.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus {
  background-color: black !important;
  color: white !important;
}

.btn-primary {
  color: white !important;
  background-color: green !important;
  width: 100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="btn-group">
  <div class="radiobuttonWidth">
    <button class="btn btn-primary">Test</button>
  </div>
</div>