sábado, 17 de octubre de 2015

Poner Estilos Css a un Input "file"

Al momento de trabajar con un input tipo "file" notamos que no podemos aplicar estilos ni modificar el texto del boton eso hace que se pierda la estética en nuestro proyecto si tenemos botones personalizados



Pero lo bueno es que tenemos una alternativa que nos puede salvar el día, podemos hacer que un boton "button" que si puede ser modificado con estilos simule el click del input tipo "file", esto es de mucha utilidad y fácil de implementar usando Javascript, aparte ocultaremos en input "file" para que solo quede el "button" Ejemplo:



<html>
<head>
<style>
.modificar{
width:130px;
height:40px;
background-color: blue;
color:white;
border:0;
}
</style>
<head>
<body>
<input id="botonArchivo"
type="file"
style="display:none;">
<button onclick="document.getElementById('botonArchivo').click()" class="modificar">ABRIR</button>
</body>
</html>

No hay comentarios.:

Publicar un comentario