[SOLUCIONADO] Mostrar una imagen en lugar de <input type"file">

[Jovany_Hipster]

Que tal amigo de foros del web este es mi primer aporte y espero les ayude mucho...

Lo Primero que tienen que hacer es hacer el input type file:


<div class="archivo">
<input type"file" id="file">
</div>


a este input lo ponemos dentro de un div y el estilo sera el siguiente:

<style>
.archivo {
width: 80px;
height: 80px;
overflow: hidden;
}
#file {
background-image: url("img/tu-imagen.png");
height: 80px;
background-size: 80px 80px;
padding-left: 80px;
}
</style>

y listo podran personalizar como se les ocurra su input, pueden ponerle su :hover y lo que se les ocurra... espero y les haya servido, se html, css, php y un poco de javascript, si nesesitas algo puedes contactarme:
via email:
[email protected]
o bien por facebook:
Jovany Hipster

[PHPeros]

Bien pensado, me pregunto si funcionará en todos los navegadores al igual que hace en Chrome

[Jovany_Hipster]

me falto algo en el stilo
<style>
#file {
width: 0px;
background-color: rgba(255,255,255,0);
}
</style>

para que en internet explorer no se recorra y que no se vea ningun fondo gris...