DEV Community

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

Posted on • Updated on

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

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)