How To Change Default Browser

IE to Chrome

The newest HTML5 range input provides you with a nifty slider UI component. But definitely it looks extremely different and sort of blah across browsers. Don't be concerned, you can style input in just about any internet browser!

The syntax differs from vendor to supplier, but in all cases, you've got two elements that need to be styled. The track is the lengthy piece representing the range, plus the flash is the nub you slide to pick a value.

'components of feedback type range

It is possible to apply styles directly to feedback, but you may come across cross-browser problems. Better to take advantage of the vendor particular track and thumb selectors as much as possible. We will use them to recreate this customized styled range slider.

Webkit based browsers (Chrome, Safari, Opera)

In webkit based browsers, the track is styled with an unique pseudo selector ::-webkit-slider-runnable-track, together with thumb with ::webkit-slider-thumb.

Custom focus types can also be applied on the thumb together with track. If you go that path, you'll have to eliminate standard focus styles from the feedback itself.


You will have to tell webkit you desire nothing at all to do with their particular standard types by including a -webkit-appearance: not one; on both feedback and also the flash.

feedback{ -webkit-appearance: none; } input::-webkit-slider-runnable-track { background: #ddd; border: none; border-radius: 3px; } input::-webkit-slider-thumb { -webkit-appearance: none; border: none; border-radius: 50%; background: goldenrod; margin-top: -4px; } input:focus { outline: none; } input:focus::-webkit-slider-runnable-track { background: #ccc; }


In Firefox, the track is fashioned utilising the ::-moz-range-track pseduo selector, and flash using ::-moz-range-thumb.

There is presently slightly bug in Firefox in which outline: nothing doesn't eliminate focus types. For those who have a good background colour, it is possible to hack a fix by hiding the outline under a border.

You will also must provide feedback similar width as your track. It won't expand to contain the track by itself.

input{ /* fix for FF unable to apply focus style bug */ border: 1px solid white; /*required for proper track sizing in FF*/ } input::-moz-range-track { background: #ddd; border: none; border-radius: 3px; } input::-moz-range-thumb { border: none; border-radius: 50%; background: goldenrod; } /*hide the outline behind the border*/ input:-moz-focusring{ outline: 1px solid white; outline-offset: -1px; } input:focus::-moz-range-track { background: #ccc; }

Internet Explorer 10 +

Input type range is supported in IE10 and above. We can style the thumb using ::-ms-thumb pseudo, and the track with ::-ms-track.

IE wont let the flash overflow the track, which means you'll need to settle for a bigger track that is at the very least as big as the flash.

: The flash nevertheless cannot overflow the track, but Graham Fowler stated a clever workaround. We are able to fake an extensive sufficient track by adding a thick transparent border on top and base of the track. We'll additionally move almost all of our types to ::-ms-fill-lower and ::-ms-fill-upper rather than ::ms-track to ensure things like border-radius render properly.

Share this article

Related Posts

Import from ie to Chrome
Import from ie to Chrome

Latest Posts
Firefox import Favorites
Firefox import…
Launched with much fanfare, Microsoft…
How to add to bookmarks bar?
How to add to…
The Publish it! bookmarklet is a superb…
Import Google Chrome bookmarks to Safari
Import Google…
In my situation, change is scary. Altering…
Settings in Google Chrome
Settings in Google…
All snacks are permitted automatically…
How to add Firefox?
How to add Firefox?
If you visit the Microsoft Power BI support…
Featured posts
  • Transfer bookmarks from one computer to another
  • Import from ie to Chrome
  • Transfer Firefox bookmarks to Chrome
  • How to import Favorites into Chrome?
  • Import favorites into ie
  • Importing Firefox bookmarks to Chrome
  • Chrome to Firefox
  • Sign into Chrome
  • Export ie bookmarks to Chrome
Copyright © 2024 l All rights reserved.