title: range styling not correct in Firefox and Internet Explorer
body: <p>I have created a custom range style, and in Chrome it works but why does it not work in FireFox/Internet Explorer?</p>
  
  <p>Chrome(works fine):
  <img src="https://i.stack.imgur.com/g1WfA.png" alt="Chrome screen"></p>
  
  <p>Firefox:
  <img src="https://i.stack.imgur.com/LqByf.png" alt="Firefox Screen"></p>
  
  <p>Internet Explorer:
  <img src="https://i.stack.imgur.com/BA6pg.png" alt="IE screen"></p>
  
  <p>CSS:</p>
  
  <pre><code>div#slider {
      width: 100%;
  }
  
  div#slider &gt; input[type="range"] {
      -webkit-appearance: none !important;
      width: 100%;
      height: 20px;
      background:#201f1f;
      border-radius: 4px;
      border:1px solid #6e6e6e;
  }
  
  div#slider &gt; input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none !important; 
      width: 13px;
      height: 30px;
      background-color: #3c3c3c;
      border-radius: 5px;
      border:1px solid #6e6e6e;
    }
  </code></pre>
  
  <p>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?</p>
  
  <p>Live demo: <a href="http://rgbgenerator.com/dev/" rel="nofollow noreferrer">http://rgbgenerator.com/dev/</a></p>
  
  <p>EDIT:</p>
  
  <p>When I have:</p>
  
  <pre><code>div#slider &gt; 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 &gt; 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 &gt; input[type="range"]::-moz-range-thumb {
      -moz-appearance: none !important; 
      width: 13px;
      height: 30px;
      background-color: #3c3c3c;
      border-radius: 5px;
      border:1px solid #6e6e6e;
  }
  </code></pre>
  
  <p>It works on Chrome, but not in FireFox?</p>