Styling file input with foundation

Question

I'm using foundation and I've not seen anything in the documentation regarding the file input, only general input elements. But styling the file input is not so easy. And more if you want to keep it coherent with the design of the whole form in all the browsers.

I've seen some solutions like Styling an input type="file" button or https://github.com/filamentgroup/jQuery-Custom-File-Input, but I wanted to know if there's something specific in foundation, as the usual wrapping div styles don't work at all (div.large-3.columns etc.).

How do you do it?

score 1 · Answer 1 · answered May 17 '13 at 10:48

1

Do you need only button? Or field with file's address too? If only button the simpliest solution is demo

<a class="wrapper">
    button name
  <input type="file"/>
</a>

.wrapper {
    width: 100px;
    height: 30px;
    overflow: hidden;
    position: relative;
}
input {
     position: absolute;
     right: 0;
     top: 0;
     bottom: 0;
     font-size: 50px; /* some huge for cursor pointer hack */
}

also you can use pseudo-classes for some browsers see article

answered May 17 '13 at 10:48

Vicky

164
1
3

It's a very simple option, thanks for the answer. However, it'd very useful IMHO to show the file address or at least an indicator saying that the file is already loaded :) Because of this, maybe the simplest solution would be styling the existing file input element, including the file address field... – josal May 17 '13 at 10:54

score 0 · Answer 2 · answered Jun 18 '13 at 12:01

0

I just applied the .button class to the input tag. It looks good enough for me.

answered Jun 18 '13 at 12:01

Vineonardo

183
1
4
12

It doesn't show the same style for the input file than for the rest of the input fields. – josal Jun 21 '13 at 10:52

score 0 · Answer 3 · answered Aug 16 '18 at 22:53

For any styling more sophisticated than Foundation's default (e.g. changing the look of the browse button) you will need to edit their implementation of the label element technique.

It's fully semantic, accessible and requires no JavaScipt. Basically, you hide the input, ensure the id is set on both the label and file field, then style the label accordingly. Here's a great article that explains the technique along with a CodePen (https://codepen.io/bmarshall511/pen/bjyEgq) that shows how it's done: https://benmarshall.me/styling-file-inputs/

[type="file"] + label {
  background: #f15d22;
  border-radius: 5px;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

Styling file input with foundation

3 Answers3