About this set
Four ways to make the plain file input look like the rest of a form without losing what the browser does for free. File selector button restyles the native input through the ::file-selector-button pseudo-element: a bordered field with a tinted button that fills with the accent colour on hover, and the browser still prints the chosen file name beside it. Sizes shows the same field small, default and large, for dense tables, normal forms and touch screens. Pill, multiple files uses a rounded field with a dark button and the multiple attribute, so the field reports how many files were picked. Button and file name hides the input visually rather than removing it, draws a solid button from its label, and prints the chosen name next to it with four lines of JavaScript. Use the first three when the native field is enough and you only want it on brand; use the last when the design calls for a real button. In every variant the input stays in the page, so clicking the label, pressing Enter or Space, form submission and screen reader output work as they do on an unstyled input.
What’s included
- Native input restyled through ::file-selector-button
- Small, default and large sizes
- Pill field for multiple files
- Button and file name variant with a visually hidden input
- Accept attributes and hint text on every field
Accessibility
Every input has a visible label, and hint text is joined with aria-describedby. The native fields show a two-colour focus ring on the field itself; the button and file name variant draws the ring on the button when the hidden input has keyboard focus, and the chosen name sits in a polite live region. Transitions switch off under prefers-reduced-motion.
Customise it
Change --fi-accent, --fi-accent-ink, --fi-tint and --fi-radius on .fi. In Bootstrap the same variables sit on .fi and .form-control-sm or .form-control-lg set the size; in Tailwind edit the fi colours in @theme and the file: utilities for the button.
