Search code examples
csshtmlfirefoxhtml-input

How to control the shape of the range input knob in Firefox?

Warning: The original question text below is misleading.

In fact appearance of the range input control did not change in Firefox 33.0.2.

The HTML5 range input control:

<input type="range" />

used to look roughly like this in Firefox:
The great Firefox range control appearance

Since the latest update, v33.0.2, it looks like this:
enter image description here

The original design matched our website's look and feel perfectly. The current one looks pretty much out of place.

Is there a way (CSS or a Firefox configuration setting) to force the original pointy appearance?

Solution

  • Appearance of the Range input control did not actually change in Firefox 33.0.2 - sorry for the confusion.

    What happened was that a border: CSS rule was accidentally applied to input[type="range"], which did not manifest itself as a visible border because it was later reset with a border: initial.

    The mere fact that a border was applied put the range control into a themed mode where it would draw a round knob (I wasn't aware of this mode).

    The solution is to make sure border: is not applied to the control in the first place. Then it will look pointy as it should.