Popular channels

Como personalizar un imput file

www.milportales.com.ar



Les voy a explicar como se personaliza un input file


Empezamos por el principio no?.


1- :






Tenemos el input type='file'´( por defecto el el bóton de " seleccionar archivo"

classs="campos" en css va ser la configuración del la posicion del elemento.

2:


Con un div class a continuacion de :


Seria este:
Subir foto



Vamos a configurar el boton personalizado y lo vamos a superponer sobre el generico por defecto: "input file"


Les dejo el codigo completo:

HTML:




CSS:

/* boton seleccionar y cargar ---------------------------------------------------------*/

/* Ocultamos el input file por defecto */
input[type="file"]{
font-size: 30px;
position: relative;
opacity: 1;
filter: alpha(opacity = 1);


}

/* Boton para superponer el input file ( personalizado) */

.cargar{
text-align: center;
background-color: #ccc;
color: #000;
display: block;
border-radius: 3px 0 0 3px;
width: 100px;
height: 30px;
font-size: 14px;
float: left;
position:relative;
line-height: 1.3em;
}
0
0
0
0No comments yet