What is the best way to swap out the bootstrap select CSS?

I've been attempting to adjust the color of the multiplier x 1.2, but I can't seem to override the CSS rule! Despite making changes, they aren't being reflected. Here's what I'm trying to achieve.

My goal is to modify the color of the highlighted text in the image, yet I'm encountering difficulties. I'm unsure where I'm going wrong.

https://i.sstatic.net/HQYEC.png

Fiddle: https://jsfiddle.net/snake93/mfhvs6xp/120/

The code

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

/*--CSS Moltiplicatore x1.2--*/
.txt-muted {
    color: #0d75d2!important;
}
<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="30525f5f44434442514070041e061e00">[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">Stile di vita / Attività fisica</option>
    <option class="opt" id="leggeros" name="radiosa" value="1.2" data-subtext="Moltiplicatore x 1.2">Sedentario, Smart Working, studio, pochi passi al giorno</option>
    <option class="opt" id="attivos" name="radiosa" value="1.375">Leggero, Attività fisica moderata, Corsa, fitness 1-3 Day x Week (1.375) </option>
    <option class="opt" id="allenatos" name="radiosa" value="1.55">Moderato, Operaio edile, Allenamenti intensi 4-5 Day x Week (1.55)</option>
    <option class="opt" id="Mattivos" name="radiosa" value="1.75">Attivo, Lavori pesanti, Bodybuilding, Powerlifting 6-7 Day x Week  (1.75)</option>
    <option class="opt" id="Eattivos" name="radiosa" value="1.9">Estremamente attivo, Atleta, programma di allenamento intenso 6-7 Day x Week (1.9)</option>
  </select>
</div>

<script>$('.a_level').selectpicker();</script>

htmlcssselectbootstrap-4dropdown

Answer №1

After reviewing your code, I was able to resolve the issue using the following CSS rule:

/*--CSS Update for text color--*/
.text .text-muted {
    color: green !important;
}

Hopefully this solution proves helpful!

Answer №2

To modify the css of the data-subtext, use the small css selector in your html code as shown below:

.opt small{
 color: red !important;
}

Answer №3

The selector was updated to small.text-muted for increased specificity compared to the framework's default css. Previously, the selector was listed as txt-muted.

The choice of small.text-muted was made based on the observation that the framework (bootstrap) places the text within a <small> tag, which can be easily identified using browser developer tools.

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

/*--CSS Moltiplicatore x1.2--*/
small.text-muted {
    color: #0d75d2!important;
}
<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="64060b0b10171016051424504a524a54">[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">Stile di vita / Attività fisica</option>
    <option class="opt" id="leggeros" name="radiosa" value="1.2" data-subtext="Moltiplicatore x 1.2">Sedentario, Smart Working, studio, pochi passi al giorno</option>
    <option class="opt" id="attivos" name="radiosa" value="1.375">Leggero, Attività fisica moderata, Corsa, fitness 1-3 Day x Week (1.375) </option>
    <option class="opt" id="allenatos" name="radiosa" value="1.55">Moderato, Operaio edile, Allenamenti intensi 4-5 Day x Week (1.55)</option>
    <option class="opt" id="Mattivos" name="radiosa" value="1.75">Attivo, Lavori pesanti, Bodybuilding, Powerlifting 6-7 Day x Week  (1.75)</option>
    <option class="opt" id="Eattivos" name="radiosa" value="1.9">Estremamente attivo, Atleta, programma di allenamento intenso 6-7 Day x Week (1.9)</option>
  </select>
</div>

<script>$('.a_level').selectpicker();</script>

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

Incorporate my personal design flair when utilizing third-party React.js component libraries

Incorporating Material UI as a component library in my React project has been beneficial. However, I am facing a challenge where the inline styling provided by Material UI clashes with my existing custom styles that I have developed over time. Is there a ...

cssreactjsmaterial-ui

Is animation not functioning for SVG path within a clip path on Firefox?

Creating the HTML for a unique effect: <svg class="svg-defs2" version="1.1" xmlns="http://www.w3.org/2000/svg" height="200" width="640"> <defs> <clipPath id="clipping2"> <!--Adjusting the x-coordinate of start will expand ...

cssfirefoxsvg

Adjust the width of columns using HTML and CSS

UPDATED: Here is a real-life scenario I am facing: I am trying to adjust the width of columns in my table using inline CSS. Let me provide you with an example: The Table was initially set to 100%, like this: <table width=100% ...> The total number ...

htmlcss

Having trouble with spawning child processes asynchronously in JavaScript

I'm trying to figure out how to format this code so that when a user clicks a button, new input fields and redirect buttons are asynchronously inserted into the unordered list. Everything was working fine until I added the redirect button insertion fu ...

javascripthtml

Padding on hover for navigation bar dropdowns

Having issues with a drop-down navigation menu that works fine except for the "videos" item. The hover color change doesn't cover the entire width due to padding settings. Struggling to fix this without affecting the "photography" item. Need help figu ...

htmlcss

What is the best way to maximize the use of the space available until reaching a div with varying dimensions each time

I have a div on the left that displays a name, and it can vary in length. On the right, there is another div with buttons. The number of buttons may change, so I am unsure how many will be displayed. Is there a way to utilize only CSS to make sure the fi ...

htmlcssposition

Is there a way to change an element's display to 'block'? (see more information below)

I'm having an issue with my event listener for a button that is supposed to change the css of #popUpForm. It seems to only work when I add inline css directly to #popUpForm. Is there a way to achieve this without using inline css and instead setting t ...

javascripthtmlcssdomwebpack

Displaying <p> content upon selection of a radio button

As a beginner in JS + HTML, I am looking to create 4 radio buttons with different names like this: o PS4 o Xbox o Nintendo DS When one of these is clicked/checked, I want to display the price which will be located in a "p" tag next to them, like so: o P ...

javascripthtmladdeventlistener

"When using Webpack and Sass, the background image specified with background: url() is processed correctly. However, when using webpack-dev-server, the image is

Currently, I am utilizing Webpack 2 in conjunction with webpack-dev-server and Sass loader. Here is my current configuration: { test: /\.scss/, loaders: [ "style", { loader: "css", query: { modules: false, sourceMap: true } }, ...

csssasswebpacksass-loadercss-loader

How to eliminate the space between text and list-style-image in CSS

My ul list items have an image added using the list-style-image property. Here is an example of what I have done: JSFiddle ul { list-style-image: url('http://placehold.it/50x40'); } <ul> <li>Coffee</li&g ...

htmlcss

Align the font-awesome icon in the middle of the input box vertically

Is there a way to vertically center the font-awesome icon inside an input box using Bootstrap without setting margins, padding values, or adjusting the height of the input? .inset-0 { top: 0; right: 0; bottom: 0; left: 0; } .inset-y-0 { top: ...

cssbootstrap-4

CSS grid challenges on a massive scale

My CSS grid timeline is currently generating around 1300 divs, causing performance issues. Is there a way to style or interact with the empty nodes without rendering all of them? I also want each cell to be clickable and change color on hover. Any suggest ...

javascriptcsscss-grid

What advantages does implementing W-100 on the row class offer in Bootstrap 4?

Currently in my project, the container is fluid and expanding to take up the full width of the screen. However, the row that follows it is only utilizing about 60% of the available space. Images Container: Row: What could be causing this discrepancy, e ...

twitter-bootstrapbootstrap-4

Click and keystroke fusion

Greetings everyone, I've been attempting to integrate both click and keypress functionalities into my function, but unfortunately, nothing I've attempted so far has yielded any success. Here's the code snippet: function victoryMessage() { ...

javascriptjqueryhtmlcsskeyboard

Looking for a solution to toggle the visibility of a div based on whether search results are found or not using JavaScript

Running this code <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Searc ...

javascripthtmlcss

Creating a see-through cursor resembling the one found on the App Store using CSS

Currently, I’m struggling a bit with understanding how to accomplish this task: The issue is that the pointer/arrow within the nav-element appears transparent and displays the content rather than its parent, which is the nav-element. Here is my HTML co ...

htmlcsstransparency

Trigger a function when a CSS animation reaches its completion

I am working on a small jQuery function that needs to return its value within a subfunction. The purpose behind this is so that I can later chain this function with other jQuery functions. However, I want the next chained function to start only after the m ...

javascriptjquerycsspromise

Increase the selection width automatically

.option100{ width:100px !important; } <select id="fieldOfInterestSelect" name="fieldOfInterest" class="form-control" required=""> <option value="-1">SELECT ONE</option> <option value="4893" class="option100">Actual(R)rrrrr ...

htmlcss

Tips for keeping a reading item in place while scrolling

To enhance the user experience, I would like to improve readability without affecting the scroll position. Question: Is there a way to fix the scrolling item at a specific position (item with the .active class)? I am looking to maintain a consistent read ...

javascriptjqueryhtml

Struggling with JavaScript conditional statements

Currently, I am in the process of creating a login and registration panel using jQuery and PHP. Essentially, if there are any errors during registration, it sets certain form errors, redirects back to the registration page, the JavaScript identifies these ...

phpjavascriptjqueryhtml