Kevin Powell - Community•12mo ago

Applying a pseudo element to a Firefox Input

I am aware that Firefox correctly defines an input is not an element, however Chrome/Safari do. I have a input[type="range"] and trying to layer a background to the track. Works fine for Chrome/Safari - see image. So for Chrome/Safari I can use an ::After pseudo element. I have done a lot of searching and found an old hack that no longer works:

input[type="range"] {
    -moz-appearance: initial;
}

input[type="range"] {
    -moz-appearance: initial;
}

I don't particularly want to roll my own slider, so I am wondering if there is a workaround to this for Firefox.

1 Reply

Fartasia•12mo ago

I figured it out ... Looks the same in all browsers. If anyone is interested, here is the pen: https://codepen.io/GraGra33/pen/OJaGMVZ?editors=0100

Grame Grant

CodePen

OJaGMVZ

...

Gaming

Programming

Applying a pseudo element to a Firefox Input