DEV Community

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

Posted on • Edited on

2 1

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

Imagine monitoring actually built for developers

Billboard image

Join Vercel, CrowdStrike, and thousands of other teams that trust Checkly to streamline monitor creation and configuration with Monitoring as Code.

Start Monitoring

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay