Question 293309 in Html Question posted in
Some basic documentation can be found here.

Html – How to change btn-primary (label) color for unchecked radio button?

Desired outcome:
I want to set background-color: #FFFFFF when the radio button is unchecked and background-color: #9381FF when the radio button is checked.

Current outcome:
Both buttons label text render background color as #9381FF.

I know !important is not the best technique but I’m a beginner and having a hard time understanding the other options on this SO post, so I’ve resorted to trying to work through this strategy.

How do I get the unchecked radio button to have a white background?

Client code for radio

    <% 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;
}

FYI – my layouts/boilerplate file calls my app.css file after calling the bootstrap cdn (below):

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
    crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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">
Tags:

2

Answers


  1. 0

    Okay so from your design style you have the label come right after the input element… You can use the + selector in CSS to grab that label that comes right after the input element (in the same parent container)… So the css for the styling actually becomes quite simple just use this.

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

    The first selector just set’s the baseline styles (the border-radius and the white background) the second selector makes sure the input is checked/selected and then grabs its the label right after it to update the same background color to your desired color. You can read more about the + selector here
    Now if you specifically need to select these inputs you can also add the .btn-check class to your input (if you are using other radio styles). Then use other class names for them.

    Why your current code does not work.

    Your current code doesn’t work because for one you are selecting the label (which is never checked). But more importantly you are selecting the label always with

    .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;
}

    Notice your first selector in the list is .btn-primary this will always select your label… So that’s why it isn’t rendered as white, because you are telling it to render it with these styles which you actually only want to apply when the input radio is checked… Your third css block will never run because the label will never be "checked", but the label input can be checked. The hover is valid, and would change the background color (again because of selector being .btn-primary:hover which will apply when it is hovered whether or not it is checked. So that is fine if you want that applied…

    Final note

    You don’t need to define the `border-radius: 2em;` every single style you apply, if it isn’t changing just make it a baseline style and only update exactly what is changing (which in this case is just the background) hence my example.

    Login or Signup to reply.
  2. 0

    You are trying to overwrite bootstrap css. I have not worked with bootstrap so I am not aware of how it works. But I can suggest u an alternative for what you are trying to achieve because if you did change the css of .btn-primary, it literally changes every single button in your webpage. If that is exactly what you are trying to achieve then my answer might not be helpful.

    If you want it just for one button to change then you can do something similar to the code pen link below. All you have to do is remove the .btn-primary from your class and add your own class to it

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

    Link to codepen

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search