martes, 16 de abril de 2013

resultado de input file

personalizando la input file

que tal en este post les mostrare como personalizar este tipo de "input" ya que no se le puede dar mucho estilo(a el boton es imposible), podremos darle estilo solo con css y un poco  de js para hacer que funcione.
Bueno este es el codigo HTML:


Codigo Fuente:

<div class="contenedor"><div class="transparente"></div>                                                                     
<div class="boton"><button class="botonexaminar"                                                                                 onclick="document.getElementById('examinar').click();">EXAMINAR</button></div><input type="file" id="examinar" onchange="this.style.color='green';">                                                                                 
</div>                          //el js esta ya esta en el HTML                                                                                       

Codigo Fuente:
.contenedor{                                                                                                                                          
width: 280px; height: 28px; position: relative; overflow: hidden; background: black; border-radius: 5px;                                                                                                                                           
}                                                                                                                                                             
#examinar{                                                                                                                                            
 height: 30px; position: absolute; left:-65px; top: 5px; background: black; color:red;                    
display: block; font-size: 12px; padding-top: 5px;                                                                      
}                                                                                                                                                             
.boton{                                                                                                                                                   
    width: 50px; height: 30px; position: absolute; top: -1px; left: -1px; z-index: 1;                            
}                                                                                                                                                             
.botonexaminar{                                                                                                                                   
width: 63px; height: 30px; font-size: 10px; background: black; border: white solid 1px;        color:gray; font-weight: bold; -webkit-transition:all .7s ease; border-top-left-radius: 5px; border-bottom-left-radius: 5px; cursor: pointer;                                                                                             
}                                                                                                                                                             
.botonexaminar:hover{                                                                                                                          
color: white;                                                                                                                                             
}                                                                                                                                                                  
.transparente{                                                                                                                                           
width: 230px; height: 30px; background: transparent; position: absolute; left: 63px; top: 0px; z-index: 1;                                                                                                                                                 
}                                                                                                                                                                  

y con este codigo ya pueden hacer su input file personalizado
resultado

y listo