Bootstrap 3 - how to change a color of of ".active" button with toggle?

2
votes

I am using the following code to toggle radio inputs:

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

When I click on the Contact button, the .active class will be assigned to the Contact button. When I click the Price button, the class will be assigned to the Price button.

This works well. But I would like to change the color of the active button - now, both buttons are gray. But I would like to have the .active button blue (primary) and the non-active button gray (default).

How do I do that? Can I do it only with CSS?

4
csstwitter-bootstrapbuttontwitter-bootstrap-3
your code does not seems to show what you want i ran it once clicked the radio buttons are clicked forever and there is a blue background color on both of them that is not toggling anyway – nikhil sugandh
you have to use custom html css for it – nikhil sugandh
Did you try .btn:focus, .btn.focus instead of btn.active? – Faeze

4 Answers

1
votes

Try adding this css

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

this will surely work:

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

check it out: https://jsfiddle.net/7yy68ec3/

0
votes

Add this CSS,

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

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

Now, both buttons are grey by default.

And once a button has the .active class, it shall turn blue.

0
votes
<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>