title: INPUT type=file on IE11
body: <p>I am having trouble with an input of type file on IE11.</p>
  
  <p>IE11 displays the input field as two tab-able pseudo elements (text/button).</p>
  
  <p>I found the class <code>::-ms-browse</code> which lets me set the button to <code>display: none</code>, but for some reason it is still tab-able.</p>
  
  <p>To reproduce:</p>
  
  <ul>
  <li>Click in text field</li>
  <li>Tab into input type file (will only do two tabs in IE11)</li>
  </ul>
  
  <p>The goal is to hide the input field and display a label as a button instead of the input field. For that it would be awkward to have to tab twice for one button.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>input[type="file"]::-ms-browse {
    display: none;
    visibility: hidden;
  }
  
  input[type="file"]+label.fake-file-upload {
    background: $white;
    color: #999;
    font-family: "Glober", sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    padding: 0.75rem 4rem;
    letter-spacing: 0.25rem;
    cursor: pointer;
    display: table;
  }
  
  input[type="file"]:focus+label.fake-file-upload {
    outline: 2px dotted #444;
    outline-offset: 5px;
    border-spacing: 5px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="text" &gt;&lt;br&gt;&lt;br&gt;
  &lt;input type="file" id="upload-photo" name="photo" required&gt;
  &lt;label for="upload-photo" class="fake-file-upload"&gt;DURCHSUCHEN&lt;/label&gt;</code></pre>
  </div>
  </div>
  </p>