Font size inside FilePond elements

Question

The default styling of FilePond elements imported from the default css seems a bit small. Is there a recommended way to get to the size as seen in the examples at https://pqina.nl/filepond/?

It seems the default style in the css uses font-size of 10px.

score 1 · Answer 1 · answered Apr 04 '19 at 06:06

By default the font-size of the FilePond root element is set to 1rem.

You can scale it up or down by setting a different size.

.filepond--root { font-size: 1.25rem; }

Use em instead of rem if you want to scale FilePond relatively to its parent element.

score 0 · Answer 2 · answered Mar 02 '22 at 21:35

I'm just coming across this.

if you using Filepond in a nextjs project and you're finding it difficult to apply a font-size to your Filepond component. simply add the default Filepond css to your global.css style and customize it.

for example ///global.css

.filepond--root{font-size: 10px;}

score 0 · Answer 3 · answered Jul 06 '23 at 07:12

I'm ok with this:

.filepond--root {
        font-family: inherit;
        margin-bottom: 1.5em;
        font-size: 1.3rem;
}

.filepond--root .filepond--list-scroller {
        margin-top: 0;
}

Font inherited from parent container so it's coherent with my app.

Font size inside FilePond elements

3 Answers3