如何从 Bootstrap 5 范围输入中删除蓝色轮廓

Question

我尝试使用无阴影删除轮廓，但它不起作用，还有其他解决方案吗

HTML代码

<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">

CSS代码

input[type="range"]{
    outline: none;
    border: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
  }

Answer 1

我通过查看 bootstraps src 中的文件

_custom-forms.scss

得到了答案。

这就是制作实时片段的方式：

input[type="range"]:focus::-webkit-slider-thumb {
  box-shadow: none !important;
}

input[type="range"]:focus::-moz-range-thumb {
  box-shadow: none !important;
}

input[type="range"]:focus::-ms-thumb {
  box-shadow: none !important;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


<label for="customRange1" class="form-label">Example range</label>
<input type="range" tabindex="-1" class="form-range" id="customRange1">

Answer 2

感谢您的回答，它节省了我漫长的搜索时间。