CODEWITHSUNDEEP
htmlcss
ChaniLastnamé
ChaniLastnamé

Reputation: 533

Styling input range on firefox

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

Upvotes: 0

Views: 1253

Answers (2)

Hesham Hassan
Hesham Hassan

Reputation: 761

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.

Upvotes: 1

mahish
mahish

Reputation: 1135

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.

Upvotes: 0

Related Questions