How do you style form file fields with zurb foundation? - html

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;
}

Answer 2

Custom file upload button using html css and js
Html code:
<div class="custom-file-upload">
<!--<label for="file">File: </label>-->
<input type="file" id="file" name="myfiles[]" multiple />
</div>
CSS:
.custom-file-upload-hidden {
display: none;
visibility: hidden;
position: absolute;
left: -9999px;
}
.custom-file-upload {
display: block;
width: auto;
font-size: 16px;
margin-top: 30px;
}
.custom-file-upload label {
display: block;
margin-bottom: 5px;
}
.file-upload-wrapper {
position: relative;
margin-bottom: 5px;
}
.file-upload-input {
width: 300px;
color: #fff;
font-size: 16px;
padding: 11px 17px;
border: none;
background-color: #c0392b;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
float: left;
/* IE 9 Fix */
}
.file-upload-input:hover, .file-upload-input:focus {
background-color: #ab3326;
outline: none;
}
.file-upload-button {
cursor: pointer;
display: inline-block;
color: #fff;
font-size: 16px;
text-transform: uppercase;
padding: 11px 20px;
border: none;
margin-left: -1px;
background-color: #962d22;
float: left;
/* IE 9 Fix */
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.file-upload-button:hover {
background-color: #6d2018;
}
JS CODE:
http://codepen.io/wallaceerick/pen/fEdrz check this one for complete details

Answer 3

The trick is to do something that looks like this:
HTML
<button class="file-upload">Upload
<input type="file" name="files" />
</button>
CSS
button.file-upload > input[type='file'] {
cursor: pointer;
position: absolute;
font-size: 0;
top: 0;
left: 0;
opacity: 0;
height: 100%;
width: 100%;
}
Using foundation v5.5.2: http://codepen.io/soyuka/pen/xGMPKJ