0

Tengo montando un formulario que funciona perfectamente en todos los navegadores pero al visualizarlo en internet explorer 11 observo que no se visualiza bien.

Asi lo quiero

Esto es correcto

Asi sale en Internet Explorer Esto es incorrecto, se ve así cuando lo cargo en explorer 11

<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>

Cómo puedo solucionar éste problema ya que no veo nada al respecto.

Gracias por los aportes de antemano.

4
  • Hola Kike deberias añadir la imagen de lo que te sale con IE11 para quien no pueda verlo
    – lois6b
    Commented el 16 mar. 2017 a las 8:54
  • Sí, lo he he hecho com el móvil, ya que lo tengo probando en otro equipo con un windows. Commented el 16 mar. 2017 a las 9:22
  • Perfecto, gracias. Commented el 16 mar. 2017 a las 9:50
  • Ya lo he probado, no funciona. De todos modos muchas gracias por los aportes. Commented el 16 mar. 2017 a las 10:54

1 respuesta 1

1

Todo navegador tiene unas líneas guía respecto a cómo deben verse los controles en base a la plataforma en donde se ejecuten.

No puedes hacer que se vean igual un input file en todos los navegadores, del mismo modo que no puedes hacer que se vean igual un select. Esto sucede porque tienen un motor diferente de renderizado; si tienes dos navegadores con el mismo motor verás que no hay diferencias en cómo renderizan los componentes. En adición, cada navegador agrega un "estilo por defecto" a los controles.

Solución

En navegadores basados en Webkit y en IE tenemos a disposición la propiedad CSS webkit-appearance. Hay una larga lista de posibles valores (puedes verlas aquí) pero para eliminar la apariencia que le da el navegador por defecto se usa el valor none:

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

Sin embargo, en varios escenarios no obtenemos el resultado deseado. En estos casos, lo que hay que hacer es un control personalizado.

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>

Así mantienes una vista única sea el navegador que sea, lo cual es bueno para una mejor UX.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.