title: Trouble styling range input thumb
body: <p>I'm trying to do some basic styling in an html range input with the follow:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;input type="range" min="0" value="50" max="100" step="1" /&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>input[type=range]::-webkit-slider-thumb {
    -webkit-appearance : none;
    background : red;
    height : 20px;
    width : 20px;
  }
  </code></pre>
  
  <p>I also made a <a href="http://codepen.io/anon/pen/Xpdzmz?editors=1100" rel="noreferrer">Codepen</a> you can look at.</p>
  
  <p>You'll notice that if you comment out the <code>background</code>, <code>height</code> and <code>width</code> styles the thumb does dissapear. So something is working. But with the styles applied I'd expect it to be a <code>20px</code> X <code>20px</code> red square. But alas, I just see the default thumb styling.</p>