title: input type="range" leaves black border when clicked on ipad
body: <p>I have a  on my page and I have styled it with css. </p>
  
  <pre><code>input[type=range] {
    -webkit-appearance: none;
    background-color: #1b2b66;
    width: 300px;
    height: 3px;
    position: relative;
    top: -9px;
  }
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-image: url("../images/slider.png");
    background-size: 100% auto;
    border: 0px;
    width: 35px;
    height: 35px;
  }
  </code></pre>
  
  <p>The issues is: on the ipad when the user clicks the slider thumb a black border surrounds the image. How do I hide this?</p>