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?

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

Solution 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

Solution 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

Comments

[Yakk - Adam Nevraumont]

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 to show you another CSS option for styling.

[Yakk - Adam Nevraumont]

See also: Style input type file? duplicate How to style “input file” with CSS3 / Javascript? Styling an input type=“file” button.

[banesto]

There's one big problem with this solution - you cannot know if you already uploaded something or not.. which kills UX instantly.

[soyuka]

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 :).

[banesto]

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..