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>

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
}