How to style the File Input

Tips and Tricks
1

If you've worked with file inputs in your application, you'd know that the default style doesn't look so nice. Here's an example of how it looks in chrome:

image

The good news is that we can easily fix this to look like

image

This is how:

  1. make sure that the label points to the ID of the input (normal procedure)
    image

  2. hide the input
    image

  3. Change the label to a button and change the text
    image

The resulting code looks like

<div class="form-group mb-5">
    <label for="input1" class="btn btn-outline-primary">Choose image(s) to upload</label>
    <input type="file" class="form-control visually-hidden" id="input1" name="input1">
</div>

There are many other ways to achieve similar results. Often these require JavaScript. This solution is straight forward.

3 Likes
2

Thank you @ben !!

I have in mind to try creating some custom form fields (inputbox, check & radio, togglers etc) among other elements that could be usefull of course by working on your solution here about creating custom elements:

Thanks again for everything!!
:beer:

1 Like