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?

score 4 · Accepted Answer · answered Mar 10 '13 at 10:16

4

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

answered Mar 10 '13 at 10:16

imcconnell

844
1
6
17

A user wanted to edit the above with this comment. Added here: Sadly, its what you have to do to style input type="file" at this time. The CSS and JavaScript you choose to style it is completely up to you. I found this jsfiddle created by [gabrieleromanato](http://gabrieleromanato.com/) to show you another CSS option for styling. – Yakk - Adam Nevraumont Feb 12 '14 at 16:19
See also: [Style input type file? duplicate](http://stackoverflow.com/questions/4909228/style-input-type-file) [How to style “input file” with CSS3 / Javascript?](http://stackoverflow.com/questions/3226167/how-to-style-input-file-with-css3-javascript) [Styling an input type=“file” button.](http://stackoverflow.com/questions/572768/styling-an-input-type-file-button) – Yakk - Adam Nevraumont Feb 12 '14 at 16:20

score 1 · Answer 2 · edited Sep 20 '14 at 22:38

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

score 1 · Answer 3 · answered Aug 05 '15 at 20:26

1

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

answered Aug 05 '15 at 20:26

soyuka

8,839
3
39
54

There's one big problem with this solution - you cannot know if you already uploaded something or not.. which kills UX instantly. – banesto Feb 11 '16 at 15:38
I surely don't disagree with you, just answered the question. Also, the trick stays the same, you just have to adjust the buttons sizes so you can still see the text. Or, you can handle the files with javascript :). – soyuka Feb 11 '16 at 19:50
1

I did exactly that - checked file change and put the uploaded file name in readonly input next to the button, but I hoped Zurb foundation would have this solution out of box.. – banesto Feb 11 '16 at 20:10

How do you style form file fields with zurb foundation?

3 Answers3