Issue with Bootstrap Dropdown Select CSS not functioning properly when using !important

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>

Answer №1

Insert the following code directly beneath your bootstrap.css file:

<style>
.bootstrap-select .dropdown-menu li.active small{
  color: blue !important; 
}
</style>

Alternatively, you can create a custom stylesheet below bootstrap.css and include the above CSS in it.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to locate a resolution for the error message "Warning: Task "uglify" not found"

Below is the content of my Gruntfile.js: module.exports = function(grunt) { require('load-grunt-tasks')(grunt); grunt.initConfig({ uglify: { start: { files: { 'js/script.min.js': ['js/script.js&a ...

JavaScript array images are not showing when using the img tag

For this module, I am working on creating a flipbook (magazine) using images stored in a JavaScript array. However, I am facing an issue where the images are not loading up properly. Instead of displaying the image, it shows as [object" htmlimageelement]=" ...

I'm looking to design a navbar similar to the one in the provided link, and I'd like it to appear when scrolling

I'm struggling to figure out how this particular navbar was created. How can I add a navlist for Videos and make the navbar visible upon scrolling? Are there any resources, articles, or hints to help me get started with this? LINK - ...

Attention: The index value is not defined:

This is the main page with a date picker that links to index.php, where the data table is located. Everything works fine when I select a date, but if I make any changes on the index.php page or try to access it directly, I encounter this error: Notice: ...

There was a SyntaxError that caught me by surprise in my Javascript code when it unexpectedly encountered

I have been encountering an error in my code consistently, and I am struggling to comprehend why this is happening. The problematic area seems to be in line 29 of my Javascript file. HTML <link href="Styles12.css"; type="text/css" rel="stylesheet"> ...

The media query was running smoothly until it unexpectedly stopped functioning

I've encountered an issue where something that used to work perfectly fine suddenly stopped working :( @media only screen and (max-width: 768px) { form, button, input { width: 80vw !important; } } <meta name="viewport" content="width=de ...

Is it possible for a website administrator to view the modifications I have made to the CSS and HTML code?

Is it possible for a website to detect any temporary changes made to their CSS or Html through developer tools, even though these changes are not permanent? ...

Is there a way to make the footer adapt to the varying heights of the grid sections as they grow in size?

Currently, I am facing an issue with the positioning of the page footer. Despite my efforts, it does not remain at the bottom as intended. Please refer to the image for a visual representation of the problem. How can this be rectified? It is worth noting ...

Updating the image source attribute using Vue.js with TypeScript

Let's discuss an issue with the img tag: <img @error="replaceByDefaultImage" :src="urls.photos_base_url_small.jpg'"/> The replaceByDefaultImage function is defined as follows: replaceByDefaultImage(e: HTMLImageElement) ...

Encountering an issue when adding SASS Compass Breakpoint to my development project

I'm having trouble integrating breakpoints into my web project. I have SASS, Compass, and breakpoint all installed and I've followed the installation instructions, but it seems to be causing errors. Can someone help me troubleshoot the issue? He ...

What is the best way to create a text shadow effect for a heading element?

Is it possible to create a centered heading like the one in this image using only CSS, without using flexbox? [EDIT] Below is an example using flexbox. However, there are some limitations with this code as it doesn't allow reusing the same class for ...

Resolving CSS Conflict in Panels with Legacy Bootstrap

I have recently implemented Panels from Bootstrap 3 with the older version of Twitter-Bootstrap. My challenge lies in adding the well class to the panel body, as it results in excessive padding. This was not an issue when using BS3, leading me to believe ...

What is the key to ensuring the content in your canvas adapts to different screen sizes

Greetings! I wanted to extract the values from this specific meta tag: <meta name="viewport" property="viewport" content="width-device-width, initial-scale=1"> To retrieve content from a meta tag using JavaScript, I used the following code snippet: ...

The issue arises when trying to use qtip2 in JavaScript upon page initialization

I successfully created a heatmap using JavaScript, utilizing a table with varying colors based on the displayed values' thresholds. To enhance user experience, I wanted to implement a popup window that shows additional information when hovering over a ...

What is the reason that my link to test.xls is functioning properly but the one to the .txt file is not working?

I am facing an issue with downloading files from a folder named Test. In this folder, I have various file types such as .xls, .txt, and .doc files. Within the html code, I have specified download links for these files: <p> <a href="../../Test/St ...

Javascript eval function providing inaccurate results

I have encountered a problem while using eval() for a calculator I am developing. When I input the following code: console.log(eval("5.2-5")); The output is: 0.20000000000000018 I am confused as to why this is happening. Thank you for your assistance. ...

How to trigger a forced download of a .csv file instead of displaying it in the browser using HTML

After clicking the download button, it should redirect to a new "thank you" webpage and then automatically start downloading a .csv file from the SD card after 2 seconds. However, instead of downloading the file, it is being displayed in the browser. Belo ...

Showcasing particular id or class within a different id upon clicking a link

These are the links I have available: <a href="#home">Home</a> <a href="#about">About</a> <a href="#portofolio">Portfolio</a> <a href="#contact">Contact</a> I would like the user to click on any of these l ...

Utilizing Material UI Grid spacing in ReactJS

I'm encountering an issue with Material UI grid. Whenever I increase the spacing above 0, the Grid does not fit the screen properly and a bottom slider is visible, allowing me to move the page horizontally slightly. Here is the simplified code snippe ...

The list in my "Hamburger" menu isn't loading properly

I have been attempting to add a "Hamburger" style menu to my webpage specifically for the "md" size. Although the hamburger menu displays, clicking on it does not trigger any action. I experimented with removing some classes from certain tags, but most of ...