Using the `type=file` input in Internet Explorer 11

Encountering an issue with the input type file on IE11.

In IE11, the input field is displayed as two tab-able pseudo elements (text/button).

Tried using the class ::-ms-browse to hide the button with display: none, but it remains tab-able.

To replicate:

  • Click inside the text field
  • Tab into the input type file (requires two tabs in IE11)

The objective is to conceal the input field and show a label as a button instead. Having to tab twice for one button seems cumbersome.

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">BROWSE</label>

javascriptjqueryhtmlcssinternet-explorer-11

Answer №1

After experimenting a bit, I came up with a potential solution:

If you wish to prevent the user from tabbing into the input field, make the label tabbable and clickable. Here is how you can achieve 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">BROWSE FILES</label>

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

Test out the solution here: https://jsfiddle.net/keystfjw/29/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Perform a JSON query using JavaScript

Is there a way to query JSON using JavaScript? In my JavaScript code, I have a JSON stored in a variable called 'json'. This JSON is an array of data, each containing 3 attributes: 'name', 'city', and 'age'. I am in ...

javascriptjqueryarraysangularjsjson

Achieving targeted text display on specific viewports using the visible class in Bootstrap

I've recently delved into learning Bootstrap, and I'm experimenting with creating a responsive page where certain divs will only be visible on specific viewports. I used classes like visible-xs, visible-sm, visible-md, and visible-lg for the diff ...

htmlbootstrap-4

The property 'body' cannot be read because it is undefined

I have been attempting to incorporate passport logic into my controllers file, but I encountered an issue. When I place the logic inside the controllers, it gives me an error message saying "Cannot read property 'body' of undefined." However, whe ...

javascriptnode.jsexpress

Swapping out data points using JQuery

What could be causing line 10 to return null? Click here for the code file The code seems to function properly with line 40, but not with line 10. ...

javascriptjqueryhtmlsiblings

Opt for CSS (or JavaScript) over SMIL for better styling and animation control

I recently noticed an alert in my Chrome console that SVG's SMIL animations are being deprecated and will soon be removed. The message suggested using CSS or Web animations instead. Since I want to transition from SMIL to CSS animations, there are a ...

javascripthtmlcsssvgsmil

The line breaks in elements occur when the combined widths add up to 100%

Is there a way to display an input and a button inline, with the input taking up 70% of the row and the button taking up 30%? I tried setting the CSS for the input to 70% and the button to 30%, but they keep breaking onto separate lines. How can I solve ...

css

The image spills out of its confines

Looking to create a dialogue box that fills the entire width and height of the screen? Want to divide its content into two sections - an image and a footer area with 2 rows of height? Struggling to contain the image within its designated space without over ...

htmlcsstailwind-css

Creating form elements in ReactJS dynamically and storing their values in an array

I need to render 3 materialUI TextFields multiple times, depending on the integer input by the user before rendering the form fields (the integer is stored in a variable called groupMembersCount). I am using a functional component in ReactJS with an array ...

javascriptreactjsmaterial-uireact-hooksreact-functional-component

AngularJS $scope variable issue

After searching online, I found this code snippet that I tried to implement, but unfortunately, it's not displaying any data. Below is the HTML code: <html data-ng-app=""> <head> <title>Example 4: Using AngularJS Directives an ...

javascriptangularjsangularjs-scope

Tips for creating a sidebar table of contents with CSS

I'm looking to design a webpage with a side bar table of contents (TOC) similar to the one found here: The current placement of the TOC on the HTML page is as follows: <h2>Table of Contents</h2> <div id="text-table-of-contents&quo ...

htmlcsstableofcontents

Maintain uniform product dimensions for images and configurable swatches in Magento

I am new to using Magento and I am currently working on setting a consistent product image grid size of 500px x 500px for the product detail page. Some of my product images are in square or rectangular shapes, so I need to resize them to fit into the grid ...

phphtmlcssmagentoimage-resizing

Transmit information to PHP via JSON with Cross Domain communication

My code is server1 and PHP code is server2. These servers are not connected. What issues can arise from this setup? var req = new XMLHttpRequest(); req.open("POST", "http://www.example.com/form/data.php", true); req.setRequestHeader("Content-type", "ap ...

phpjavascriptajaxjson

The Ajax request fails to trigger the success function following the JsonResult response

Attempting to utilize Ajax to add a record to the database and retrieve data from JsonResult upon successful insertion leads to an error message: parseerror. Oddly enough, the record is successfully added to the DB. Below is the code for the post method: ...

c#jqueryajaxasp.net-mvc-4

The orientation of Bootstrap flex - horizontal row or vertical column -

Bootstrap operates based on the class assigned to the parent element for flex row/column behavior. .bd-highlight { background-color: rgba(86, 61, 124, .15); border: 1px solid rgba(86, 61, 124, .15); } <link href="https://stackpath.bootstrapcdn.co ...

cssflexboxbootstrap-4

Looking to personalize the appearance of an iframe using CSS styling?

I am working with an iframe that generates a form, and I would like to customize the CSS of this form. How can I go about editing the CSS? <div class="quiz-container" style="text-align: center;" data-quiz="#######" data-pr ...

javascripthtmljquerycssiframe

What is the best way to send an action through a URL in Laravel?

In my view, I have a form that needs to trigger an action and update a table when submitted. However, after submitting the form, instead of updating the table, it redirects me to /users/{id}. Here is the code for my action: public function userToadmin($id ...

phpjqueryajaxlaravellaravel-4

Displaying an external webpage within a Backbone application

Is it feasible to display an external webpage in a view by using its URL? I am working with Backbone and Handlebars. var AuthorizeInstagramView = Backbone.View.extend({ template: Handlebars.compile(template), initialize: function () { }, ...

javascriptbackbone.jshandlebars.js

Using Angular 2 to toggle visibility based on a select box's value

<div class="form-group"> <label class="col-md-4 control-label" for="is_present">Is Present?</label> <div class="col-md-4"> <select id="is_present" name="is_present" class="form-control" *ngIf="candidates.is_present === tr ...

htmlangular

Developing custom events in an NPM package

Developing a basic npm package with signalr integration has been my recent project. Here's how it works: First, the user installs the package Then, the package establishes a connection using signalr At a certain point, the server triggers a function ...

javascripttypescripteventsnpmdom-events

Tips for creating horizontal scrolling in the div element

I'm working with a div element that looks like this: <div id="tl" style="float:right;width: 400px; height:100px; background-color:Green; overflow-x: scroll;overflow-y: hidden;"> <div id='demo' style="float:left;height ...

jqueryhtmlcss