+ File Buttons
+File inputs are notoriously hard to style consistently in every browser. Shoelace offers file buttons as an alternative.
+File buttons are much easier to style, but come with the caveat that the name and number of files selected will not be automatically shown to the user. This aspect of a file button’s UX can be handled effectively with JavaScript, but this is left as an exercise for the user.
+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 button class.
<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 multiple attribute:
<span class="file-button">
+ <input type="file" id="my-files" multiple>
+ <label class="button" for="my-files">Select Files</label>
+</span>
++
Variations
+File buttons can use button modifiers. Just apply the appropriate classes to the label.
++ + + +
++ + + + + + +
+You can also use file buttons in input groups.
+