从输入类型=“范围”中删除焦点轮廓在Firefox [英] Remove Focus Outline from Input type="range" in Firefox

问题描述

我知道还有其他问题，但我已经尝试了他们建议的一切都无济于事。这是与不同的问题。从范围输入元素中删除虚线轮廓Firefox ，因为我问的是什么导致这个流氓大纲 - 上一个问题回答如何得到下面显示的彩色轮廓。

I know there are other questions like this but I've tried everything they have suggested to no avail. This is a different question than Remove dotted outline from range input element in Firefox as I'm asking what is causing this rogue outline - the previous question answers how to get the colored outlines shown below.

这个问题a href =https://stackoverflow.com/questions/18794026/remove-dotted-outline-from-range-input-element-in-firefox>从Firefox中的范围输入元素中删除虚线轮廓） firefox错误 - https://bugzilla.mozilla.org/show_bug.cgi?id= 932410 ，但它已被标记为已解决，但我仍然有这个问题。

This SO question (Remove dotted outline from range input element in Firefox) mentions the firefox bug - https://bugzilla.mozilla.org/show_bug.cgi?id=932410 but it has since been marked as resolved but I'm still having this issue.

输入CSS是：

input[type=range]:-moz-focusring {
    outline: 1px solid orange;
}
input[type=range]:focus {
    outline: 1px solid green;
}

input[type=range] {
    -moz-appearance: none;
}
input[type=range]:focus::-moz-range-thumb {
    outline: 1px solid red;
}
input[type=range]:focus::-moz-range-track {
    outline: 1px solid blue;
}
input[type='range']::-moz-focus-inner {
    outline: 1px solid red;
}

我的浏览器计算的CSS是：

The computed CSS from my browser is:

>

浏览器中的渲染输入如下所示：

The rendered input in the browser looks like this:

从我的测试看，它看起来像： - moz-focusring 和<$ c

From my testing it looks like :-moz-focusring and :focus are the same property - green outline, overwrites the orange.

-moz-appearance：$ c>：focus none; 在 :: - moz-focus-inner 上不执行任何操作。

-moz-appearance: none; on the element does nothing along with ::-moz-focus-inner.

您可以看到范围拇指有一个红色边框，范围轨道有一个蓝色边框，但仍然有虚线轮廓。我尝试了隐藏它在边界技巧从上述SO问题的第二个答案，但然后白色边框是在范围的顶部拇指像虚线轮廓在图片中。

You can see the range-thumb has a red border and range-track has a blue border but there is still the dotted outline. I tried the 'hide it behind a border' trick from the 2nd answer in the above SO question but then the white border is on top of the range-thumb like the dotted outline is in the picture. The outline-offset also does not extend on the left or right so the dotted lines on the end still show.

推荐答案

输入[ type ='range'] :: - moz-focus-outer {border：0; }

input[type='range']::-moz-focus-outer { border: 0; }

这篇关于从输入类型=“范围”中删除焦点轮廓在Firefox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！