oriolrivera/FileImg.html

## FileImg.html
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
        <title>Modificar estilo de un input file</title>

        <style media="screen">
        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;
            }
        </style>

        <script type="text/javascript">
            /**
            * 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());
              });
            }
        </script>
    </head>

    <!-- Muestra el estilo modificado para los input files -->
    <body onLoad="mostrarInputFileModificado(1);
        mostrarInputFileModificado(2);">

        <h3>Input files con estilo modificado</h3>
        <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>
        <div class="inputModificado">
            <input class="inputImagen" id="archivo2"/>
            <div class="botonInputFileModificado">
                <input type="file" class="inputImagenOculto" id="archivo_oculto2" name="archivo_oculto2"/>
                <div class="boton">Elegir</div>
            </div>
        </div>
        <h3>Input files sin modificar</h3>
        <input name="input1" type="file">

    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
	<title>Modificar estilo de un input file</title>

	<style media="screen">
	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;
	}
	</style>

	<script type="text/javascript">
	/**
	* 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());
	});
	}
	</script>
	</head>

	<!-- Muestra el estilo modificado para los input files -->
	<body onLoad="mostrarInputFileModificado(1);
	mostrarInputFileModificado(2);">

	<h3>Input files con estilo modificado</h3>
	<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>
	<div class="inputModificado">
	<input class="inputImagen" id="archivo2"/>
	<div class="botonInputFileModificado">
	<input type="file" class="inputImagenOculto" id="archivo_oculto2" name="archivo_oculto2"/>
	<div class="boton">Elegir</div>
	</div>
	</div>
	<h3>Input files sin modificar</h3>
	<input name="input1" type="file">

	</body>
	</html>