在Firefox中删除范围输入元素中的虚线轮廓
在Firefox中删除范围输入元素中的虚线轮廓
提问于 2013-09-14 03:42:29
从版本23开始，火狐原生支持<input type="range">元素，但我不知道如何删除虚线轮廓。以下CSS不起作用：
input[type='range'],
input[type='range']:focus,
input[type='range']:active,
input[type='range']::-moz-focus-inner,
input[type='range']:-moz-focusring {
border: 0;
outline: none;
}有人知道如何在Firefox中解决这个问题吗？
回答 6
Stack Overflow用户
发布于 2014-02-09 08:04:48
正如Ken已经指出的那样，没有办法删除大纲。但是，如果您知道父元素的背景色，则可以解决“隐藏”轮廓的问题。假设背景为白色，下面的CSS将隐藏虚线轮廓：
input[type=range] {
border: 1px solid white;
outline: 2px solid white;
outline-offset: -1px;
}Stack Overflow用户
发布于 2013-09-16 08:23:39
虚线轮廓不是问题，它是浏览器显示输入元素被选中的方式。您可以做的是将tabIndex设置为-1，这将阻止您的input元素将焦点放在选项卡上，从而阻止大纲：
<input class="size" type="range" tabIndex="-1" name="size" min="1" max="6" value="6"></input>但这样做之后，您将失去一些键盘可访问性。最好让input element键盘可访问。
Stack Overflow用户
发布于 2014-02-05 09:19:11
如果对input[type='range']应用了自定义样式，则Firefox将使用不同的模型(beta)来呈现范围输入。
你可以在这里看到两个不同的模型：
从Firefox27.0开始，我不相信在Firefox中有一个自定义的CSS样式的输入范围框来遵守outline: 0;
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18794026
复制相关文章
相似问题