How do you style form file fields with zurb foundation?

Question

I'm trying to create a button with Zurb Foundation using Rails for uploading a picture. I tried this:

<input class="tiny round disabled button" name="picture[picture]" type="file">

Unfortunately, it didn't work and created two different buttons that let you choose a picture. Is there anything I need to do specifically for file fields?

Answer 1

I've found this resource to be very helpful with styling input type="file" :

http://www.quirksmode.org/dom/inputfile.html

It's notoriously difficult but this essentially involves layering the actual input with a fake one that has your styling applied to it.

<div class="file-inputs">
    <input type="file" class="hidden-input">
    <div class="fake-input">
        <input>
        <img src="images/YOURBUTTON.png">
    </div>
</div>

To go with the following CSS:

div.file-inputs {
position: relative;
}

div.hidden-input {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}

input.file {
position: relative;
    text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}