1

I have created a custom range style, and in Chrome it works but why does it not work in FireFox/Internet Explorer?

Chrome(works fine): Chrome screen

Firefox: Firefox Screen

Internet Explorer: IE screen

CSS:

div#slider {
    width: 100%;
}

div#slider > input[type="range"] {
    -webkit-appearance: none !important;
    width: 100%;
    height: 20px;
    background:#201f1f;
    border-radius: 4px;
    border:1px solid #6e6e6e;
}

div#slider > input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important; 
    width: 13px;
    height: 30px;
    background-color: #3c3c3c;
    border-radius: 5px;
    border:1px solid #6e6e6e;
  }

So, I think it`s the -webkit thingy, but where do I find these for IE en Firefox? I have searched on Google (-webkit list), but I find nothing. Also why is does it not have a normal height on IE?

Live demo: http://rgbgenerator.com/dev/

EDIT:

When I have:

div#slider > input[type="range"] {
    -webkit-appearance: none !important;
    -ms-appearance: none !important;
    -moz-appearance: none !important;
    -o-appearance: none !important;
    appearance:none !important;
    width: 100%;
    height: 20px;
    background:#201f1f;
    border-radius: 4px;
    border:1px solid #6e6e6e;
}

div#slider > input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important; 
    width: 13px;
    height: 30px;
    background-color: #3c3c3c;
    border-radius: 5px;
    border:1px solid #6e6e6e;
}

div#slider > input[type="range"]::-moz-range-thumb {
    -moz-appearance: none !important; 
    width: 13px;
    height: 30px;
    background-color: #3c3c3c;
    border-radius: 5px;
    border:1px solid #6e6e6e;
}

It works on Chrome, but not in FireFox?

DazDylz
  • 1,028
  • 3
  • 13
  • 39
  • It's because you target Webkit browsers using the `-webkit` vendor prefix; replace `-webkit` with `-ms` (for IE, theoretically at least), `-moz` (for Mozilla/Firefox), `-o` (for Opera, that haven't yet switched to the Webkit/Blink). – David Thomas May 28 '14 at 11:29

1 Answers1

0

Use:

.thing {
   -webkit-appearance: value;
   -moz-appearance:    value;
   appearance:         value;
}

When you google a word with a '-' before it, google wil search for pages WITHOUT that word. So it's not very strange is google founds nothing ;)

The appearance property is not supported by: IE and Opera.

For more information:

Css tricks appearance

W3Schools documentation and browser support

Andreas Furster
  • 1,558
  • 1
  • 12
  • 28
  • You should always use all prefixes and also add the property without the prefix, as newer browsers might have dropped it. The current list of prefixes (as David mentioned in his comment) is -webkit, -ms, -o, -moz – Catalin Deaconescu May 28 '14 at 11:40
  • But div#slider > input[type="range"]::-mz-slider-thumb { will not work? – DazDylz May 28 '14 at 11:45
  • You have to separate the selectors and set a new block of code for each selector prefix. The specs say that if a user agent doesn't recognize part of a selector, it has to ignore the whole selector and its block. [Docs](http://www.w3.org/TR/css3-syntax/#rule-sets) – Andreas Furster May 28 '14 at 11:49
  • If that won't work to, i am afraid you have to use some JavaScript. – Andreas Furster May 28 '14 at 11:57
  • First look to two things: [_new](http://stackoverflow.com/questions/4964130/target-blank-vs-target-new) and [script after body tag](http://stackoverflow.com/questions/3037725/is-it-wrong-to-place-the-script-tag-after-the-body-tag). Cause you html is not valid, some other things can go wrong. – Andreas Furster May 28 '14 at 13:19