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