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
No hay comentarios:
Publicar un comentario