Hidden/styled file input working in Firefox but not in Chrome

Question

The following code to style / hide an input type file is working in all browsers but Chrome.

<h5>Artikelliste hochladen:</h5>
<label for="uploadSkus">
    <button class="btn" id="add-article-list">
        <i class="icon icon-folder-open"></i> Liste auswählen
    </button>
</label>
<input type="file"
       name="uploadSkus" id="uploadSkus"
       class="articles-upload" style="display: none;">

Demo JSFiddle here.

I'm stuck on which minor detail is preventing Chrome from letting this work.

Tried playing arround with the display: none; without success. No errors or warnings in the console. Any idea ?

score 1 · Answer 1 · answered Aug 21 '14 at 10:05

1

Use the hidden attr

    <h5>Artikelliste hochladen:</h5>
    <label for="uploadSkus">
        <button class="btn" id="add-article-list"><i class="icon icon-folder-open"></i> Liste auswählen</button>
    </label>
    <input type="file" name="uploadSkus" id="uploadSkus" class="articles-upload" hidden>

answered Aug 21 '14 at 10:05

Gildas.Tambo

22,173
7
50
78

check it here http://jsfiddle.net/L7onjztj/1/ it works for me on chrome what version of chrome do you have? – Gildas.Tambo Aug 21 '14 at 10:07
Most recent Version 36.0.1985.143 m – Daniel W. Aug 21 '14 at 10:08
is the fiddle working on it because that s the same version i have and it s working – Gildas.Tambo Aug 21 '14 at 10:09
It does.. I tried with a different computer with same Chrome still no success – Daniel W. Aug 21 '14 at 10:11

score 1 · Accepted Answer · edited May 23 '17 at 12:06

Have a look at this article: How can I remove the "No file chosen" tooltip from a file input in Chrome?

<h5>Artikelliste hochladen:</h5>
<label for="uploadSkus">
   <button class="btn" id="add-article-list"><i class="icon icon-folder-open"></i> Liste auswählen</button>
</label>
<input type="file" name="uploadSkus" id="uploadSkus" class="articles-upload" style="display: none;">

$('#add-article-list').click(function(){
   $("#uploadSkus").trigger('click');
})

score 0 · Answer 3 · edited May 15 '15 at 19:55

0

For me the problem was the display:none style on the input, the label works fine in firefox but didn't work in chrome.

To keep the hidden effect I removed the display:none style and add height: 0px; overflow: hidden; on the input.

edited May 15 '15 at 19:55

NathanOliver

171,901
28
288
402

answered May 15 '15 at 19:27

user4905181

1

Hidden/styled file input working in Firefox but not in Chrome

3 Answers3