Styling input range on firefox

Question

I am trying to style the HTML input range and it works as I expected on webkit browsers but my styling for -moz- browsers doesn't seem to work. I was trying to use pseudo elements before and after on the moz-range-thumb but Firefox doesnt support that maybe? I couldn't find any proper documentation on this. But if someone can help me come up with a solution to this I'd really appreciate it.

This is the moz styling I applied which is the same as for webkit browsers:

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

JSFiddle

possible duplicate of [How to customize the HTML5 input range type looks using CSS?](http://stackoverflow.com/questions/3556157/how-to-customize-the-html5-input-range-type-looks-using-css) — Oriol, Feb 02 '15 at 20:05

score 1 · Answer 1 · answered Mar 29 '16 at 08:45

1

For firefox just added background: #fff; to input style and it rendered exact as chrome. if it doesn't work with you we can check your firefox version.

answered Mar 29 '16 at 08:45

Hesham Hassan

761
6
14

score 0 · Answer 2 · edited May 23 '17 at 12:07

Perfect explanation of the reason is given here.

:before and :after render inside a container
Pseudo-elements can only be defined (or better said are only supported) on container elements. Because the way they are rendered are within the container itself as a child element. input can not contain other elements hence they're not supported.

As a cross-browser workaround you can use the pseudo-elements on the input's label tag instead. That worked for me.

Styling input range on firefox

2 Answers2