How can I replace the bootstrap select CSS?

Question

I am trying to change the color of the multiplier x 1.2, although I have overwritten the CSS with the rule! Important, the changes are not applied. Here's what I'm trying to do.

I am trying to change the color of the text that I have underlined in the image, but I cannot. I don't understand where I'm wrong.

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/bootstrap@4.6.0/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>

Answer 1

I changed the selector to small.text-muted which makes your selector more specific than the css provided by the framework. You also had the selector as txt-muted.

I used small.text-muted because the framework (bootstrap) places that text inside of a <small> tag which can be seen by using the dev tools in the browser.

.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/bootstrap@4.6.0/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>

Answer 2

You can use the small css selector to change css of the data-subtext so your html should look something like this

.opt small{
 color: red !important;
}

Answer 3

I just check your code and i solve the problem with this css sentence:

/*--CSS Moltiplicatore x1.2--*/
.text .text-muted {
    color: green !important;
}

I hope I've helped ;)