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

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

.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>

Answer 2

确保将样式表放在引导CSS样式表上方

<!doctype>
<html>
 <head>
     <style>
               <link rel="stylesheet" href="styles.css">
             <link rel="stylesheet" href="bootstrap.css">
     </style>

然后使用“ btn和btn-primary类”为按钮设置样式

   .btn-primary{
             color: white;
             background-color: red !important;
         }

我如何覆盖Bootstrap中primary-Button的样式

2 个答案: