css - 在Firefox中删除范围输入中的虚线
问题描述
我有一个这样的范围输入:
.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
}
推荐阅读
- azure - 从 python 行列表缓慢插入 Azure SQL 数据库
- python - 词正则表达式不同时态的模式匹配
- python - Colab PRO:资源耗尽:在 /job:localhost/replica:0/task:0/device:GPU:0 上分配具有形状和类型 float 的张量时出现 OOM
- r - 高效处理来自 R 中 Web 套接字的大量数据
- angular - 从服务打字稿返回数据时遇到问题
- python - 修复敌人的移动?
- c++ - 尝试创建一个基本的计算器
- java - 语句必须在前面加上 case 标签:onClick 中的 SWITCH 方法
- ansible - 确定为什么 parted ansible 模块似乎没有创建分区
- javascript - 响应没有从 Node js 后端返回