How to make css for input type file

Question

Trying to make css for input type file but not working.In my code choose file button is coming above of button css So how to remove using css?

I want to show only blue color button with file upload process

Demo: https://stackblitz.com/edit/angular6-bootstrap4-navbar-8hr7um?file=src/app/app.component.html

<input #file type="file" id="fileInput" accept='image/*' (change)="preview(file.files)" class="btn btn-primary btn-block mx-auto" value="UPLOAD IMAGE" />

jaibalaji · Accepted Answer · 2020-05-16 10:19:23Z

1

use below html(assuming you are using bootstrap)

<label class="btn btn-primary"> Browse <input type="file" style="display: none;"> </label>

answered May 16, 2020 at 10:19

jaibalaji

3,5252 gold badges17 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Charlotte_Anne · Accepted Answer · 2020-05-14 17:17:04Z

0

I think you are using Bootstrap's documentation for buttons, but what would work best for you is Bootstrap's documentation for input groups. Check out the second to last category on this page: https://getbootstrap.com/docs/4.5/components/input-group/. It's titled 'Custom file input.' I think if you put your style into these it would work.

answered May 14, 2020 at 17:17

Charlotte_Anne

3826 silver badges18 bronze badges

2 Comments

Kavitha K Over a year ago

Tried but I do not know How to use it.Can you update my stackblitz?

Charlotte_Anne Over a year ago

Hi again, sorry for the late response. I was not online over the weekend. Try pasting the code from jaibalaji's answer into your stackblitz. That should work.

Collectives™ on Stack Overflow

How to make css for input type file

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related