Logo

dev-resources.site

for different kinds of informations.

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

Published at
11/8/2022
Categories
inputfile
uploadbutton
fileupload
styling
Author
fergolive
Author
9 person written this
fergolive
open
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

styling Article's
30 articles in total
Favicon
Making Your CLI Applications Pop with Styled Outputs
Favicon
Decoding StyleX: Meta's Cutting-Edge Styling System
Favicon
Free Tailwind CSS Button Animations
Favicon
Styling in React
Favicon
Need Help With Z-Index/Positiong
Favicon
Styling in React: CSS-in-JS vs. Traditional CSS
Favicon
Panda CSS Conditions
Favicon
Styling Your Next.js Web Application
Favicon
DIV Class and CSS. A beginner explains.
Favicon
Personalizing MUI Stepper
Favicon
CSS's :root Variables. Use it!
Favicon
2 Style Patterns in React for Extended Component Styling
Favicon
Complete beginner's guide to using Styled Components with Nextjs and TypeScript
Favicon
Here, not there — or, making styling behave
Favicon
WHY TAILWIND CSS WHEN I HAVE BOOTSTRAP
Favicon
Darle estilo a un input file upload button <input type="file">
Favicon
Material UI vs Semantic UI vs Styled Components
Favicon
7 Tailwind CSS Tips I Wish I Knew Earlier
Favicon
Boost your styling with Bootstrap 🚀
Favicon
React Styling Methods
Favicon
Module scoped styling in Angular 13
Favicon
How to Detect User Color Preference in React Native
Favicon
CSS Styling Tricks: Flexbox
Favicon
CSS Styling Tricks: How to Build Responsive Web Applications with Percentages
Favicon
Here is why I switched from bootstrap to tailwind.
Favicon
Tailwind vs Sass/SCSS: Structure and Consistency over Style and Comfort
Favicon
What is calc() function in CSS ?
Favicon
Accent all areas
Favicon
CSS basic 3 - Units, Text Styling
Favicon
Pourquoi TailwindCSS est le meilleur moyen de styliser une page web ?

Featured ones: