CODEWITHSUNDEEP
csshtmlfirefoxhtml-input
GSerg
GSerg

Reputation: 78185

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?

Upvotes: 3

Views: 3982

Answers (3)

GSerg
GSerg

Reputation: 78185

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.

Upvotes: 3

TylerH
TylerH

Reputation: 21087

Yes, you can use the ::-moz-range-track pseudo selector and ::-moz-range-thumb pseudo selector. According to this site, you'll also need to give input[type=range] the same width as your track selector.

JSFiddle

CSS:

input[type=range] {
    width: 300px;
    }
input[type=range]::-moz-range-track {
    background: #dedede;
}
input[type=range]::-moz-range-thumb {
    background: grey;
    border-radius: 0px 0px 510px 510px;
}

Upvotes: 2

user663031
user663031

Reputation:

See http://demosthenes.info/blog/757/Playing-With-The-HTML5-range-Slider-Input.

You can do things like

::-webkit-slider-thumb, ::-moz-range-thumb, ::-ms-thumb {
    -webkit-appearance: none;
    background-color: #666;
    width: 10px;
    height: 20px;
 }

Also possibly helpful: http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html, http://www.developerdrive.com/2013/09/how-to-style-range-sliders-in-webkit/, https://gist.github.com/afabbro/3759334, http://www.htmllion.com/html5-range-input-with-css.html, http://www.hongkiat.com/blog/html5-range-slider-style/, etc. ec.

Upvotes: 2

Related Questions