如何更改 Bootstrap 4 范围滑块颜色?

问题描述

是否有任何想法如何自定义 bootstrap 4 范围的颜色并将蓝色拇指颜色更改为灰色"?

Is there any ideas how to customize bootstrap 4 ranges colors and change blue thumb color to 'gray'?

在下面输入 html.

Input html below.

<p id="slider" class="range-field">
  <input
    type: "range",
    min:"0" max:"3"
    class: "custom-range"
    value: "2"
    disabled: "true"
  />
</p>

推荐答案

尝试以下代码 - 各种供应商特定的类，根据您的要求使用:

Try the following code - various vendor-specific classes, use depending on your requirement needs:

.custom-range::-webkit-slider-thumb {
  background: gray;
}

.custom-range::-moz-range-thumb {
  background: gray;
}

.custom-range::-ms-thumb {
  background: gray;
}

每个评论来自 Astariul 和 aliawadh980，像这样改变拇指点击时出现的阴影:

Per comments by Astariul and aliawadh980, change the shadow that occurs when the thumb is clicked like this:

-webkit-slider-thumb:active {
    background-color: red;
}
-webkit-slider-thumb,
.custom-range:focus::-webkit-slider-thumb,
.custom-range:focus::-moz-range-thumb,
.custom-range:focus::-ms-thumb {
    box-shadow: red;
}

这篇关于如何更改 Bootstrap 4 范围滑块颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！