File inputs are notoriously hard to style consistently in every browser. Shoelace offers file buttons as an alternative.
To create a file button, use the following markup. Note that the input needs to have an
id and the label needs to have a matching
for attribute. The label also needs to have the
<span class="file-button"> <input type="file" id="my-file"> <label class="button" for="my-file">Select File</label> </span>
This approach is a bit more verbose than simply wrapping the input with a label, but the extra markup makes file buttons accessible via keyboard.
You can allow multiple files to be selected by adding the
<span class="file-button"> <input type="file" id="my-files" multiple> <label class="button" for="my-files">Select Files</label> </span>
File buttons can use button modifiers. Just apply the appropriate classes to the label.
You can also use file buttons in input groups.