How to style button for input type=file

Asked Jul 31 '22 at 09:15

Active Jul 31 '22 at 09:21

Viewed 25 times

Hello I want to style the BUTTON with text Choose files that's generated as a result of <Input type='file'/> in Chakra UI

I gave it id="file-input" then styled it in CSS like so #file-input {...}

However, it styles the whole container - not the button itself. After inspecting the button in chrome, it seems to be called input#file-upload-button however, after applying styles to this class it changes nothing.

How can I change that button saying 'Choose file' in Chakra UI or just CSS itself?

edited Jul 31 '22 at 09:17

asked Jul 31 '22 at 09:15

Mateusz Szumilo

2

Does this answer your question? https://stackoverflow.com/questions/572768/styling-an-input-type-file-button – Mina Jul 31 '22 at 09:20
@Mina yes, thank you so much! I'll try to wrap the input element inside of label element and let you know – Mateusz Szumilo Jul 31 '22 at 09:22
You should forst look at the pseudo class `::file-selector-button` – t.niese Jul 31 '22 at 09:23

How to style button for input type=file

0 Answers0