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?

Answer 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