CODEWITHSUNDEEP
csstwitter-bootstrap
Ahmed Hussein
Ahmed Hussein

Reputation: 765

Custom color of toggle buttons

I have created a set of toggle buttons like this:

.bs-example {
  margin: 20px;
}
<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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary">
        <input type="checkbox"> Option 1
      </label>
  <label class="btn btn-primary">
        <input type="checkbox"> Option 2
      </label>
  <label class="btn btn-primary">
        <input type="checkbox"> Option 3
      </label>
</div>

I want to change the color of the buttons in the two toggle states. For example, when a button is active it becomes green, and it remains white other wise.

Could you help me?

Upvotes: 0

Views: 5469

Answers (3)

Gerardo BLANCO
Gerardo BLANCO

Reputation: 5648

You should be careful using the !important tag this is to help overriding the bootstrapstyle.

You can also acomplish that by declaring your stylesheet after the bootstrap css <link>

Hope this helps

.btn:active,
.active {
  color: black !important;
  background-color: green !important;
  border-color: green !important;
}
<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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary">
        <input type="checkbox"> Option 1
      </label>
  <label class="btn btn-primary">
        <input type="checkbox"> Option 2
      </label>
  <label class="btn btn-primary">
        <input type="checkbox"> Option 3
      </label>
</div>

Upvotes: 3

chris cozzens
chris cozzens

Reputation: 517

try this - you can choose whatever color you would like.

.btn-group input:active{
   color:#73b2b2; 
   background-color:#73b2b2;
}

Upvotes: 0

Sletheren
Sletheren

Reputation: 2486

Add this to your css for active class 

.btn-primary.active, .btn-primary:active {
  background-color: green;
  border-color: green;
}

And for normal state give the label a class:

.someclass {
 background-color: white;
 border-color: white;
 color: black
}

Upvotes: 0

Related Questions