在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标记上的伪元素。这对我有用。