我有这样的范围输入:
.my-slider {
vertical-align: middle;
-webkit-appearance: none;
margin-left: 5px;
width: 100%;
height: 10px;
border-radius: 5px;
color: white;
background: white;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.my-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
border: none;
cursor: pointer;
}
.my-slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
border: none;
cursor: pointer;
}
.my-slider::-moz-range-track {
background-color: white;
}
<input type="range" min="0" max="275" value="0" class="my-slider" id="myRange">
一切看起来都很好,只是当我点击拇指时,会出现 2 条虚线,如下所示:
我尝试添加 border: none
和 outline: none
规则来删除它们,但无济于事。这只发生在 Firefox 中,虚线不会在 Chrome 中显示。
有人知道如何去除虚线吗?谢谢!
最佳答案
使用 ::-moz-focus-outer
选择器。
input[type=range]::-moz-focus-outer {
border: 0
}
关于css - 在 Firefox 中删除范围输入中的虚线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53921713/