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.