Bootstrap 3 - как изменить цвет кнопки «.active» с помощью переключателя? - PullRequest
Новая
       21

Bootstrap 3 - как изменить цвет кнопки «.active» с помощью переключателя?

0 голосов
/ 26 мая 2018

Я использую следующий код для переключения радиовходов: 

<div class="btn-group">
  <a href="#price" class="btn btn-primary btn-xs active" data-toggle="tab">
    <input type="radio" name="price" id="price" value="1"> Price
  </a>
  <a href="#contact" class="btn btn-primary btn-xs active" data-toggle="tab">
    <input type="radio" name="contact" id="contact" value="0"> Contact
  </a>
</div>

Когда я нажимаю кнопку Контакт , классу .active будет присвоен Контактная кнопка .Когда я нажимаю кнопку Цена , класс назначается кнопке Цена .

Это хорошо работает.Но хотелось бы изменить цвет активной кнопки - теперь обе кнопки серые.Но мне бы хотелось, чтобы кнопка .active была синей (основной), а кнопка non-active серой (по умолчанию).

Как это сделать?Могу ли я сделать это только с помощью CSS?

Ответы [ 4 ]

0 голосов
/ 26 мая 2018

это наверняка сработает: 

<!DOCTYPE html>
<html>
<style>
/* The container */
.container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default radio button */
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
    background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}
</style>
<body>

<h1>Custom Radio Buttons</h1>
<label class="container">One
  <input type="radio" checked="checked" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Two
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Three
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Four
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>

</body>
</html>

проверьте: https://jsfiddle.net/7yy68ec3/

0 голосов
/ 26 мая 2018 
<div class="btn-group">
  <a href="#price" class="btn btn-primary btn-xs active" role="button" data-toggle="tab">
    <input type="radio" name="price" id="price" value="1"> Price
  </a>
  <a href="#contact" class="btn btn-default btn-xs disabled" role="button" data-toggle="tab">
    <input type="radio" name="contact" id="contact" value="0"> Contact
  </a>
</div>
0 голосов
/ 26 мая 2018

Добавьте этот CSS, 

.btn-group .btn.btn-primary.active {
  background: blue;
}

.btn-group .btn.btn-primary {
  background: grey;
}

Теперь обе кнопки по умолчанию серые.

И как только кнопка имеет класс .active, она должнапосинеть.

0 голосов
/ 26 мая 2018

Попробуйте добавить эту CSS 

.btn-group .btn.active {
    background-color: blue;
}
...