Customize the color of a Bootstrap btn-group

Question

Customize the color of a Bootstrap btn-group

Is there a way to modify the background color of the active or selected button within a button group?

<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
  <input type="radio" class="btn-check" name="btnradio" id="btnradio1" checked>
  <label id="monthly" class="btn btn-outline-primary" for="btnradio1">Button 1</label>
        
  <input type="radio" class="btn-check" name="btnradio" id="btnradio2">
  <label class="btn btn-outline-primary" for="btnradio2">Button 2</label>
</div>

Although this CSS changes the color of unselected buttons, how can I adjust the background color of the selected button?

.btn-group .btn {
 color: #ff60bd;
 border-color: #ff60bd;
}

Thank you in advance!

html css twitter-bootstrap

Answer 1

Answer №1

To achieve the desired effect, insert the following code into your CSS file: The first step is to conceal the radio controls, while the second step is crucial for altering the background color when the button is :checked.

input[type="radio"]{
    display: none;
}

input[type="radio"]:checked + .btn {
    color: #fff;
    background: #00ff33!important;
}

input[type="radio"]:hover + .btn {
  color: #000;
  background-color: #ffcc00;
}

Answer 2

To achieve the desired effect, insert the following code into your CSS file: The first step is to conceal the radio controls, while the second step is crucial for altering the background color when the button is :checked.

input[type="radio"]{
    display: none;
}

input[type="radio"]:checked + .btn {
    color: #fff;
    background: #00ff33!important;
}

input[type="radio"]:hover + .btn {
  color: #000;
  background-color: #ffcc00;
}

Answer 3

Answer №2

The button that is currently selected or active will have the active class applied to it. To style this button, you should target the ".active" class within the ".btn" group as shown in the example below:

.btn-group .btn.active {
 color: #ff60bd;
 border-color: #ff60bd;
}

Answer 4

The button that is currently selected or active will have the active class applied to it. To style this button, you should target the ".active" class within the ".btn" group as shown in the example below:

.btn-group .btn.active {
 color: #ff60bd;
 border-color: #ff60bd;
}

Customize the color of a Bootstrap btn-group

Answer №1

Answer №2

Similar questions

unable to render the JavaScript code

Leveraging both onmouseover and onmouseout for container expansion

Guide to repairing a CSS ball animation

Discovering the base color using a hexadecimal color value in C#

What causes the Material-UI Grid element to shift upon clicking it?

Mastering Space Between Row Items in Bootstrap 5 Grid: A Guide to Gutters

Creating a soft focus effect in a specific region (behind the text)

What is the best approach to ensure the navbar is responsive based on the viewport size?

What is the best way to implement a JSON object within an <img> src attribute?

Assigning a unique identifier to a button that will vary depending on the selected radio input

Finding the height of concealed content within a div using the overflow:hidden setup

The function document.getElementById is unable to select multiple elements simultaneously

Outside drop shadows in CSS3 creates an interesting visual effect by giving

Acquiring information to display in a div using innerHTML

PhoneGap redirect page feature

Hovering over a white background will darken the CSS styling

Assign the two values to variables in the CSS script

The z-index property fails to function properly when used with a relative parent and after/before pseudo-elements

Copy the content of one input field into another field at the same time

Using jQuery to modify a CSS property when a specific option is chosen