Html5 form is not displayed with internet explorer 11

Question

Html5 form is not displayed with internet explorer 11

Navigation

#1 by (1 votes)

0

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">
</p>

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

Thanks for the contributions in advance.

html5 internet-explorer-11 webbrowser

asked by Kike Algarra 16.03.2017 в 09:52

source

1 answer

Class similar to HashMap that provides get (int index) in Java Send image from android to web server api

score 1 · Answer 1

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.

Solution

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('https://fonts.googleapis.com/css?family=Noto+Sans:400,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>
</div>

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