如何替换 bootstrap select CSS？

Question

我正在尝试更改乘数 x 1.2 的颜色，尽管我已经用规则覆盖了 CSS！重要的是，更改不会应用。这是我正在尝试做的事情。

我想更改图像中加下划线的文本的颜色，但我做不到。我不明白我哪里错了。

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

密码

.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

我将选择器更改为 small.text-muted，这使您的选择器比框架提供的 css 更具体。您还有选择器 txt-muted.

我使用 small.text-muted 因为框架 (bootstrap) 将该文本放在 <small> 标签内，可以通过浏览器中的开发工具看到。

.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

我只是检查了你的代码，我用这个 css 句子解决了问题：

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

希望对您有所帮助 ;)

Answer 3

您可以使用小型 css 选择器更改数据子文本的 css，这样您的 html 应该看起来像这样

.opt small{
 color: red !important;
}

如何替换 bootstrap select CSS？

How can I replace the bootstrap select CSS?

html

css

select

dropdown

bootstrap-4