DEV Community

Cover image for Darle estilo a un input file upload button <input type="file">
Fernando Garcia
Fernando Garcia

Posted on • Edited on

Darle estilo a un input file upload button <input type="file">

#inputfile #uploadbutton #fileupload #styling

HTML

Vamos a necesitar un div contenedor, un label, otro div que va a llevar el estilo que quieras, inclusive puede ser una imagen o ponerle un icono.

 <div class="upload-container"> <label for="file-input"> <div class="upload-button"> Choose your file </div> </label> <input id="file-input" (change)="getFile($event)" type="file" /> </div>
Enter fullscreen mode Exit fullscreen mode

En el siguiente CSS lo único que vamos a hacer es ocultar el input y darle estilo a la clase "upload-button" aqui es donde le puedes dar el estilo que quieras.

CSS

 .upload-container>input { display: none; } .upload-button{ cursor: pointer; width: 200px; border-radius: 8px; height: 60px; background-color: green; display: grid; justify-content: center; align-items: center; font-size: 20px; font-weight: 600 }
Enter fullscreen mode Exit fullscreen mode

RESULTADO

Image description

Sígueme o escríbeme 😉 cualquier aporte sera bienvenido
https://linktr.ee/fergolive

Top comments (0)