[FR] Styles for `input[type='file']`

[mainej]

I'm wondering if you have thoughts on styling file inputs. The vanilla file input is weird, with both a button and some dynamic text. Does that mean individual projects should choose styling on their own? Or is there some useful global reset?

[artfultoucher]

I second that. Converted my project to tailwind 2.0. The file input elements are all vanilla.
BTW, with the old customs form plugin I liked the round corners but this will probably be configurable anyway in the future.

[carrete]

Perhaps this tailwindlabs/tailwindcss#3515 is relevant?

[mainej]

@carrete I don't think I'm running into tailwindlabs/tailwindcss#3515. But in looking at that issue, I realized that this project already does (and always has done) a little bit of styling on file inputs. It appears to reset the styles generally, I suppose to make it easier to style file inputs with Tailwind utilities.

It does not do anything to remove or re-style the browser-generated button or the name of the selected file, which is what my original question was about. That button looks pretty out of place on a page otherwise styled by Tailwind. But... since writing this Issue, I've done some more research and found something that works for me. My requirements were: 1) the UI should look and behave like a regular button styled with Tailwind; 2) the style should be tweakable with Tailwind utilities; 3) the selected file name should be visible, without resorting to JS.

Most solutions floating around the internet hide the whole input element, which hides the button but also hides the name of the selected file. There are various approaches that use JS to restore the name of the selected file, but that isn't really in the Tailwind spirit.

Instead, I hide only the button by targeting it with the pseudo classes: ::file-selector-button, ::-webkit-file-upload-button and ::-ms-browse. Then, I make the surrounding label element look like a button. Since the input element isn't completely hidden, you can still see the file name. A few more styles are needed to preserves focus styling. For posterity, here's what I'm doing:

/* file: styles.css */

/* for some reason, the browsers are ignoring these if they are combined into one rule, separated by commas */
::file-selector-button       { @apply sr-only; }
::-webkit-file-upload-button { @apply sr-only; }
::-ms-browse                 { @apply sr-only; }

<label class="text-sm font-semibold px-3 py-2 rounded-md hover:bg-gray-100 ring-1 ring-gray-500 focus-within:ring-2 focus-within:ring-indigo-500">
  Choose file: 
  <input type="file" class="focus:outline-none">
</label>

I defer to the Tailwind team as to whether tailwindcss-forms should do something similar by default. It'd be hard to un-hide the default button, so my guess is "no", but perhaps I'm not considering all the factors.

Edit: removed @layer base wrapper around pseudo class styles, to avoid purging.

[gshaw]

@mainej and others, thanks for the pointer. I used it to create this OK styled file component that others might find useful.
https://play.tailwindcss.com/TVHzmVU3k4?layout=horizontal

I too found the same problem with having to duplicate the rules to types the file selector. I'm not familiar with which browser uses -ms-browse, is that Edge? Is there a way an easy to test that browser from a Mac?

If anybody improves on the look of this. E.g., figures out how to shift the "no file selected" prompt to the right please share a link.

Edit: Updated link to revised playground with better support for errors and a few other tweaks inspired from Bootstrap 5.

[lukewarlow]

-ms-browse is used by IE10, 11 and Legacy Edge. So is safe to ignore for most people.

The reason you need to duplicate the rules is because when browsers see an invalid selector the whole block gets ignored.

So for browsers that don't support the standard version they can't fallback to the webkit version.

https://play.tailwindcss.com/dAUlXDZt6r - Anyone who wants a file-selector-button variant this should demonstrate one. Though be aware it doesn't work with other variants like hover. (I'm not entirely sure why)

[mainej]

Here's a version of @lukewarlow's Tailwind Play example that works with other variants like hover: https://play.tailwindcss.com/Bgd6hn9eI9. Note that this works (for me) in Chrome but for some reason not Firefox.

[mainej]

And here's @gshaw's example re-worked to use the plugin: https://play.tailwindcss.com/LlHPfGpozT?layout=horizontal
(Note that this Tailwind Play example isn't working in Firefox, though it is working in Chrome. I believe the code will work in real projects.)

[mainej]

Fixed by tailwindlabs/tailwindcss#4936. 🎉

[colbyhemond]

For those that end up here looking for the solution (like myself), here's a link to the section of the tailwind docs that mentions styling file input buttons: https://tailwindcss.com/docs/hover-focus-and-other-states#file-input-buttons