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