Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Mostrar una imagen en lugar de <input type"file"> en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 14/05/2015, 10:49
 
Fecha de Ingreso: abril-2015
Ubicación: morelia, michoacan
Mensajes: 3
Antigüedad: 3 años, 3 meses
Puntos: 2
Información Mostrar una imagen en lugar de <input type"file">

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
  #2 (permalink)  
Antiguo 14/05/2015, 11:15
Avatar de PHPeros
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 4 años, 11 meses
Puntos: 578
Respuesta: Mostrar una imagen en lugar de <input type"file">

Bien pensado, me pregunto si funcionará en todos los navegadores al igual que hace en Chrome
  #3 (permalink)  
Antiguo 14/05/2015, 11:50
 
Fecha de Ingreso: abril-2015
Ubicación: morelia, michoacan
Mensajes: 3
Antigüedad: 3 años, 3 meses
Puntos: 2
Respuesta: Mostrar una imagen en lugar de <input type"file">

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

Última edición por Jovany_Hipster; 14/05/2015 a las 11:56

Etiquetas: formulario, input, personalizar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 10:07.