I'm having trouble customizing some text in a dropdown menu. Even when I use the !important rule to override the CSS, nothing changes. I'm not sure what I'm doing wrong. Here's the issue:
Before making a selection, everything looks fine. But after selecting an option, the "x 1.2 multiplier" disappears because the text color is white. I want to change this, but I'm unable to do so.
Before selection:
https://i.sstatic.net/DUYm0.png
After selection:
https://i.sstatic.net/80bhg.png
Fiddle: https://jsfiddle.net/snake93/mfhvs6xp/132/
.opth {
font-family: Roboto;
font-size: 15px;
font-weight: 600 !important;
color: #2f354c !important;
background: #fff !important;
}
.opt {
background: #fff !important;
font-family: Roboto;
font-size: 13px;
font-weight: 500 !important;
color: #5f6a91 !important;
}
.filter-option {
font-family: Roboto;
font-size: 14px;
font-weight: 500 !important;
color: #5f6a91 !important;
}
.opt:hover {
background: #F6F7F7 !important;
color: #2f354c !important;
}
.btn {
border-radius: 0px !important
}
.dropdown .bootstrap-select .dropdown-toggle:focus, .dropdown .bootstrap-select>select.mobile-device:focus+.dropdown-toggle, .dropdown .btn:not(:disabled):not(.disabled) {
outline: none !important;
}
.dropdown.bootstrap-select.a_level {
border: 1px solid #DCDCDE;
}
/*--Custom CSS for 'x 1.2 multiplier' Before Selection--*/
small.text-muted {
color: #0d75d2!important;
}
/*--Custom CSS for 'x 1.2 multiplier' After Selection--*/
.bootstrap-select .dropdown-menu li.active small {
color: red !important;
}
<!--jQuery-->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!--BootStrap Select-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.min.js"></script>
<!--BootStrap-->
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="10727f7f64636462716050243e263e20">[email protected]</a>/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.0/css/bootstrap.min.css">
<div class="container_level">
<select class="a_level" id="a_level" form="bmrcalc" name="activ_level" data-show-subtext="true" data-width="100%">
<option class="opth" value="0">Lifestyle / Physical Activity</option>
<option class="opt" id="sedentary" name="radio_sa" value="1.2" data-subtext="Multiplier x 1.2">Sedentary, Smart Working, study, few steps per day</option>
<option class="opt" id="lightactive" name="radio_sa" value="1.375">Light, Moderate physical activity, Running, fitness 1-3 Day x Week (1.375) </option>
<option class="opt" id="moderateactive" name="radio_sa" value="1.55">Moderate, Construction worker, Intensive workouts 4-5 Day x Week (1.55)</option>
<option class="opt" id="heavyactive" name="radio_sa" value="1.75">Active, Heavy labor, Bodybuilding, Powerlifting 6-7 Day x Week (1.75)</option>
<option class="opt" id="extremeactive" name="radio_sa" value="1.9">Extremely active, Athlete, Intense workout program 6-7 Day x Week (1.9)</option>
</select>
</div>
<script>$('.a_level').selectpicker();</script>