CODEWITHSUNDEEP
javascriptjqueryhtmlcssinternet-explorer-11
Domenik Reitzner
Domenik Reitzner

Reputation: 1613

INPUT type=file on IE11

I am having trouble with an input of type file on IE11.

IE11 displays the input field as two tab-able pseudo elements (text/button).

I found the class ::-ms-browse which lets me set the button to display: none, but for some reason it is still tab-able.

To reproduce:

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.

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);
}
<input type="text" ><br><br>
<input type="file" id="upload-photo" name="photo" required>
<label for="upload-photo" class="fake-file-upload">DURCHSUCHEN</label>

Upvotes: 1

Views: 3147

Answers (1)

Alexandre Elshobokshy
Alexandre Elshobokshy

Reputation: 10922

After playing a bit with it I might have an idea :

If you want to be able to prevent the user from tabbing into the input, make the label tabbable and clickable, I would do this : 

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);
}

<input type="text" ><br><br>
<input type="file" id="upload-photo" name="photo" required tabindex="-1">
<label for="upload-photo" class="fake-file-upload" tabindex="0">DURCHSUCHEN</label>

$('.fake-file-upload').keypress(function (e) {
 var key = e.which;
 if(key == 13)  // the enter key code
  {
    $('.fake-file-upload').trigger("click");
    return false;  
  }
});

Test case : https://jsfiddle.net/keystfjw/29/

Upvotes: 1

Related Questions