Html5 form is not displayed with internet explorer 11


I have a form that works perfectly in all browsers but when viewing it in internet explorer 11 I notice that it is not displayed well.

So I want it

This is how it works in Internet Explorer

<p class="left entradaTxt">
  <!-- <p class="pull-right entradaTxt"> -->
  <label for="Fotografia">Fotografía (tamaño máximo 500 Kbytes, formato .jpg):</label>
  <input id="foto" name="FotografiaJPG" type="file" accept=".jpg" class="input-file-jpg" size="500">

How can I solve this problem since I do not see anything about it.

Thanks for the contributions in advance.

asked by Kike Algarra 16.03.2017 в 09:52

1 answer


Every browser has some guidelines regarding how the controls should look based on the platform where they are executed.

You can not make a input file look like in all browsers, just as you can not make a select look the same. This happens because they have a different rendering engine; if you have two browsers with the same engine you will see that there are no differences in how they render the components. In addition, each browser adds a "default style" to the controls.


In browsers based on Webkit and IE we have the CSS property webkit-appearance available. There is a long list of possible values (you can see them here ) but to eliminate the appearance that the Default browser uses the value none :

input[type="file"] {
  webkit-appearance: none;

However, in several scenarios we do not obtain the desired result. In these cases, what you need to do is a custom control .

function putFilename(filename, node) {
  node.textContent = filename;
@import url(',700');

body {
  padding: 20px;
  text-align: center;

input[type="file"] {
  display: none;

input[type="file"] + label {
  background-color: #eee;
  border: 2px solid #ccc;
  /border-radius: 3px;
  color: #555;
  cursor: pointer;
  font-family: 'Noto Sans';
  font-size: 14px;
  padding: 6px 12px;

input[type="file"] + label + p {
  color: #555;
  display: inline-block;
  font-family: 'Noto Sans';
  font-size: 14px;
  padding: 5px 0;
<div class="input-file">
  <input type="file" id="file" onchange="putFilename(this.files[0].name, filename)">
  <label for="file">Seleccionar</label>
  <p id="filename">No se ha escogido ningún archivo</p>

This way you keep a single view regardless of the browser, which is good for a better UX.

answered by 16.03.2017 в 15:50