Hace poco más de un mes me estaba buscando como modificar el estilo de un input file y encontre varias cosas y entre todas, propuse mi solución. Pero hace unos dias mientras estaba completando la galería de imagenes que posteé tampoco hace no mucho tiempo, intente modificar un poco más el input file y me di cuenta de que habia usado una forma bastante retorcida y desde luego no era la mejor.
Asique aquí pongo la solución final (de momento jejeje) para modificar un input file con 5 lineas de HTML, otras 5 lineas de JavaScript y una hoja de estilo.
El codigo HTML es similar a la anterior versión:
<div class="inputModificado">
<input class="inputImagen" id="archivo1"/>
<div class="botonInputFileModificado">
<input type="file" class="inputImagenOculto" id="archivo_oculto1" name="archivo_oculto1"/>
<div class="boton">Examinar</div>
</div>
</div>
Es muy sencillo, en la linea 2 colocamos el campo en el que se mostrará el archivo seleccionado y en la linea siguiente hay una division que contiene el botón y el input file oculto porque no se puede modificar directamente.
La función JavaScript (bueno JQuery) es totalmente trivial copia el contenido del input oculto en el que se muestra cada vez que se modifica.
/**
* Permite que se muestre el contenido del input file oculto en otro input.
*
* @param numeroInput Numero del input file que se quiere ver con un estilo modificado
* y del input en el que se mostrara.
*/
function mostrarInputFileModificado(numeroInput) {
$("#archivo_oculto"+numeroInput).change(function(){
$("#archivo"+numeroInput).val($("#archivo_oculto"+numeroInput).val());
});
}
La función es la que usaré para modificar los input para subir imagenes a la galería, que se crean de forma dinamica por lo que hay que ir ejecutando la función cada vez que se crea un input, pero si no vas a estar en este caso puedes crear un bucle para no llamar a la función tontamente.
Y para terminar el CSS para modificar el estilo:
body {
background: darkgrey;
}
.inputModificado {
margin: 10px 0px 10px 50px;
clear: both;
}
.inputImagen {
background: #ffcc99;
opacity: 0.5;
box-shadow: 0px 0px 5px black, inset 0 0px 5px 2px black;
padding: 5px;
border-radius: 4px;
color: #000;
font-weight: bold;
float: left;
margin-top: -2px;
}
.botonInputFileModificado {
position: relative;
border-radius: 10px;
background-color: #fff;
color: #000;
border: 2px solid #666;
padding-bottom: 2px;
box-shadow: inset 0 0px 8px 2px black;
width: 100px;
margin-left: 180px;
}
.botonInputFileModificado:hover {
border: 2px solid #fff;
background-color: #333;
color: #fff;
}
.botonInputFileModificado .inputImagenOculto {
opacity: 0;
position: absolute;
margin-left: -125px;
width: 225px;
}
.botonInputFileModificado .boton {
text-align: center;
}
Como siempre el código completo lo puedes descargar aquí.
Y aquí también puedes ver el código completo, realizar las modificaciones que quieras y ver el resultado.
