What is the best way to modify the color of the btn-primary (label) for an unchecked radio button

Question

What is the best way to modify the color of the btn-primary (label) for an unchecked radio button

Objective: I am aiming to change the background color to #FFFFFF when the radio button is not checked and to #9381FF when it is checked.

Current Result: Currently, both buttons display a background color of #9381FF.

I am aware that using !important is not the ideal approach, but as a beginner, I am struggling to comprehend other solutions outlined in this Stack Overflow post, so I am trying to tackle this approach for now.

How can I make the unchecked radio button have a white background?

Client code for radio buttons:

    <% layout('layouts/boilerplate') %>

    <div class="col-md-4 mb-3">
        <div class="btn-group" role="group" aria-label="Event Filter">
          <input type="radio" class="btn-check" name="eventFilter" id="upcomingEvents" value="upcoming" autocomplete="off" checked>
          <label class="btn btn-primary" for="upcomingEvents">Upcoming events</label>
          
          <input type="radio" class="btn-check" name="eventFilter" id="pastEvents" value="past" autocomplete="off">
          <label class="btn btn-primary" for="pastEvents">Past events</label>
        </div>
      </div>

CSS code:

.btn-primary,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:checked,
.btn-primary:focus {
    background-color: #9381FF !important;
    border-color: #9381FF !important;
    color: #e8f1f9 !important;
    border-radius: 2em;
}

.btn-primary:hover {
    background-color: #6f5cd9 !important;
    border-color: #6f5cd9 !important;
    color: #e8f1f9 !important;
    border-radius: 2em;
}

.btn-primary:not(:checked) {
    background-color: white; /* Change background to white when unchecked and hovered */
    border-color: #9381FF;
    color: #e8f1f9;
    border-radius: 2em;
}

Note: my layouts/boilerplate file calls my app.css file after including the Bootstrap CDN (see below):

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="51333e3e25222523302111647f637f62">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c9aba6a6bdbabdbba8b989fce7fbe7fa">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7L+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
    crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="debcb1b1aaadaaacbfaef3b7bdb1b0ad9eeff0e6f0ef">[email protected]</a>/font/bootstrap-icons.css">

<script src='https://api.mapbox.com/mapbox-gl-js/v2.4.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.4.1/mapbox-gl.css' rel='stylesheet' />
<link rel="stylesheet" href="/stylesheets/app.css">

javascript html css bootstrap-5

Answer 1

Answer №1

Your design style indicates that the label should follow directly after the input element. You can achieve this by using the + selector in CSS to target the label immediately following the input element within the same parent container. Here is a simple CSS styling solution:

input[type="radio"] + label{
  background-color: #ffffff;
  border-radius: 2em;
}
input[type="radio"]:checked + label{
  background-color: #9381FF;
}

The first selector sets the base styles for the label, while the second selector updates the background color when the input is checked. More information on the + selector can be found here. If you need to differentiate these inputs, consider adding a .btn-check class to your input and apply additional classes as needed.

Reasons why your current code may not be working properly

Your current code fails because you are targeting the label itself, which is never checked. Additionally, the use of the .btn-primary class selects the label unconditionally, rather than only when the radio input is checked. To resolve this, focus on selecting the input instead of the label.

Your third css block will not execute as intended since the label cannot be "checked." The hover effect specified in your code will still work even if the input is not checked. When defining styles, prioritize updating only what needs to change to minimize redundancy.

Concluding thoughts

Avoid redundant declarations by setting baseline styles and modifying specific properties that require changes. Keep in mind the relationship between input and label elements for accurate styling implementation.

Answer 2

Your design style indicates that the label should follow directly after the input element. You can achieve this by using the + selector in CSS to target the label immediately following the input element within the same parent container. Here is a simple CSS styling solution:

input[type="radio"] + label{
  background-color: #ffffff;
  border-radius: 2em;
}
input[type="radio"]:checked + label{
  background-color: #9381FF;
}

The first selector sets the base styles for the label, while the second selector updates the background color when the input is checked. More information on the + selector can be found here. If you need to differentiate these inputs, consider adding a .btn-check class to your input and apply additional classes as needed.

Reasons why your current code may not be working properly

Your current code fails because you are targeting the label itself, which is never checked. Additionally, the use of the .btn-primary class selects the label unconditionally, rather than only when the radio input is checked. To resolve this, focus on selecting the input instead of the label.

Your third css block will not execute as intended since the label cannot be "checked." The hover effect specified in your code will still work even if the input is not checked. When defining styles, prioritize updating only what needs to change to minimize redundancy.

Concluding thoughts

Avoid redundant declarations by setting baseline styles and modifying specific properties that require changes. Keep in mind the relationship between input and label elements for accurate styling implementation.

Answer 3

Answer №2

I don't have experience with working on bootstrap CSS, so I may not be able to provide detailed guidance on that specific topic. However, I can offer an alternative approach to achieving your desired outcome without directly modifying the .btn-primary styling.

If you only want to change the style of a single button, you can follow a similar method to the code snippet provided below. Simply remove the .btn-primary class and replace it with your custom class.

<div class="btn-group" role="group" aria-label="Event Filter">
      <input type="radio" class="btn-check radio" name="eventFilter" id="upcomingEvents" value="upcoming" autocomplete="off" checked>
      <label class="btn check" for="upcomingEvents">Upcoming events</label>
      
      <input type="radio" class="btn-check radio" name="eventFilter" id="pastEvents" value="past" autocomplete="off">
      <label class="btn check" for="pastEvents">Past events</label>
    </div>

.radio{
  display:none;
}
.check{
  border:none;
  outline:none;
  pointer-events:none;
}
.check{
  background:red;
  display:block;
  width:100px;
  height:100px;
}
.radio:checked ~ .check {
  background:black;
}

You can also refer to this CodePen link for further insights.

Answer 4

I don't have experience with working on bootstrap CSS, so I may not be able to provide detailed guidance on that specific topic. However, I can offer an alternative approach to achieving your desired outcome without directly modifying the .btn-primary styling.

If you only want to change the style of a single button, you can follow a similar method to the code snippet provided below. Simply remove the .btn-primary class and replace it with your custom class.

<div class="btn-group" role="group" aria-label="Event Filter">
      <input type="radio" class="btn-check radio" name="eventFilter" id="upcomingEvents" value="upcoming" autocomplete="off" checked>
      <label class="btn check" for="upcomingEvents">Upcoming events</label>
      
      <input type="radio" class="btn-check radio" name="eventFilter" id="pastEvents" value="past" autocomplete="off">
      <label class="btn check" for="pastEvents">Past events</label>
    </div>

.radio{
  display:none;
}
.check{
  border:none;
  outline:none;
  pointer-events:none;
}
.check{
  background:red;
  display:block;
  width:100px;
  height:100px;
}
.radio:checked ~ .check {
  background:black;
}

You can also refer to this CodePen link for further insights.

What is the best way to modify the color of the btn-primary (label) for an unchecked radio button

Answer №1

Reasons why your current code may not be working properly

Concluding thoughts

Answer №2

Similar questions

Struggling to create a web application using parcel-bundler (Java not loading post-compilation)

Issue with the position of the search dropdown in HTML

Custom Jquery function is failing to position divs correctly within ajax-loaded content

Tips for resolving the issue encountered with a modal in bootstrap 5

What is the best way to incorporate dynamic elements into a canvas that evolve over time?

The server encountered an unexpected error while processing the request, possibly due to a

Using various HTML elements within Phonegap applications

JavaScript - Separate Artist and Title

In the Firebug console, Ajax posts are highlighted in a vibrant red color

Angular in conjunction with socket.io does not immediately show messages on screen

I'm struggling to figure out how to specify the data type for storing an array of objects in a variable using React.useState

Display the GIF when the mouse hovers over it, but ensure it plays just a single time

ensure that the element matches the height of its parent element

How to perfectly position an image within a fixed full screen container

Tips for aligning the dropdown menu to start from the border of the menu bar instead of displaying directly below the text

I am facing a challenge with my data, as it includes start and end values representing character indexes for styles. I need to find a way to convert this information into valid HTML tags

The toggle for hiding and showing, along with changing the button color, is not functioning properly due to

"Encountered a Http502 error while running the Node component (code provided for reference purposes

Material-UI: The call stack has exceeded the maximum range, causing an Uncaught RangeError

Transferring a variable between a JavaScript function and a Java class