CSS3: range styling

Vote count:

0

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):

Firefox:

Internet Explorer:

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?

asked 53 secs ago

user3144435

119