How to convert the html5 input button to div tag?

Question

In my html5 code, I use this tag to select files to read from.

<input type="file" id="files" name="files[]" multiple />

But this has an browse button and I want to change it to a possibly a div tag so its just a click able element. I don't want to see that default browse button with the text appearing next to it.

Is there a css way to just change it so I don't see the button, yet I can still click it, or do I just have to hide it, and make something else click-able just manually click it, when clicked?

you can have a hidden file element and use a div or any other tag to trigger a click event on the file element — Arun P Johny, Mar 16 '14 at 05:09
related: [Which browsers support triggering click event on `input[type=“file”]` elements?](https://stackoverflow.com/questions/7905288/which-browsers-support-triggering-click-event-on-inputtype-file-elements) — Felix Kling, Mar 16 '14 at 05:11
The only problem is with IE where if you are trying to submit the form on the change event of the file element, in IE(9/10) it will throw an security error — Arun P Johny, Mar 16 '14 at 05:13
You should amend the title of this question to something about styling the file-upload input to be more specific, and get more answers. — sheriffderek, Mar 16 '14 at 05:36
Duplicate : http://stackoverflow.com/questions/21842274/cross-browser-custom-styling-for-file-upload-button/21844646#21844646 — sheriffderek, Mar 16 '14 at 05:40

score 0 · Answer 1 · answered Mar 16 '14 at 05:24

0

<input type="file" id="files" name="files[]" multiple style="display:none"/>
<label for="files">Click Here</label>

works in chrome,IE11,Firefox 27.no js

answered Mar 16 '14 at 05:24

mpm

20,148
7
50
55

score 0 · Accepted Answer · answered Mar 16 '14 at 05:53

Here is how I've been doing it by using the label to wrap the input: fiddle

HTML

<label for="upload-file" class="upload-wrapper">
    <input id="upload-file" type="file" />
    <img src="http://www.wikiprogress.org/images//Icon_UploadPapers.png" alt="" />
</label>

SCSS

.upload-wrapper {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    opacity: .5;
    &:focus {
      outline: 0;
    }
  }
  max-width: 10em;
  img {
    display: block;
    width: 100%;
    height: auto;
  }
  &:hover, &:focus {
    border: 3px solid red;
  }    
}

score 0 · Answer 3 · answered Mar 16 '14 at 08:36

this may help

i created a fiddle too http://jsfiddle.net/S2jht/

in this we add the same function to a div using a line of javascript (and no jquery)

document.querySelector('#fileSelect').addEventListener('click', function (e) {
// Use the native click() of the file input.
document.querySelector('.filer').click();
}, false);

and hide the default input button using css display:none

How to convert the html5 input button to div tag?

3 Answers3

HTML

SCSS