Как я могу переписать стиль первичной кнопки в Bootstrap - PullRequest
Новая
       5

Как я могу переписать стиль первичной кнопки в Bootstrap

0 голосов
/ 02 ноября 2018

Я хотел бы изменить цвет фона, если я нажму на кнопку радио. 

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

эффект наведения работает, но не активный

Ответы [ 2 ]

0 голосов
/ 02 ноября 2018

Это работает для меня. Пожалуйста, убедитесь, что вы определили свой 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>
0 голосов
/ 02 ноября 2018

Убедитесь, что вы поместили свою таблицу стилей выше таблицы стилей начальной загрузки css 

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

Затем вы вводите стиль кнопки с помощью "btn & btn-primary class" 

   .btn-primary{
             color: white;
             background-color: red !important;
         }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...