Firefox上的样式输入范围

Question

我正在尝试设置 HTML 输入范围的样式，它在 webkit 浏览器上按预期工作，但我为 -moz- 浏览器设置的样式似乎不起作用。我试图在 moz-range-thumb 之前和之后使用伪元素，但 Firefox 可能不支持？我找不到任何适当的文档。但如果有人能帮我想出解决方案，我将不胜感激。

这是我应用的 moz 样式，与 webkit 浏览器相同：

input[type=range]::-webkit-slider-thumb:before {
                        position: absolute;
                        top: 5px;
                        left: -2000px;
                        width: 2000px;
                        height: 6px;
                        margin-left: -2px;
                        background: #666;
                        content: ' ';
                    }

JSFiddle

Answer 1

对于 firefox，刚刚将 background: #fff; 添加到 input 样式，它呈现为与 chrome 完全相同。如果它不适用于您，我们可以检查您的 Firefox 版本。

Answer 2

原因完美解释here。

:before 和 :after 在容器内渲染
伪元素只能在容器元素上定义（或者说只支持）。因为它们的呈现方式是在容器本身作为子元素。 input 不能包含其他元素，因此不受支持。

作为一种跨浏览器的解决方法，您可以改用输入的label 标记上的伪元素。这对我有用。