How to make a non-displayed input or its label `keyboard tab stoppable`?

Question

To have a customized input file, I've made it hidden by:

 input[type="file"]{display:none;}

and have put a background for its label:

 label.uploadfilelabel {background-image:url(../image.jpg);}

This approach works fine, But it has introduced another problem: Keyboard tab does not stop on this button and its label. I tried using tabindex="0" with no result. Is there any way to stop keyboard tab on this hidden button?

Of course, I prefer a pure CSS solution, but a javascript solution (without jQuery) is also acceptable.

Thanks for sharing

UPDATE: Here is a fiddle of the problem. I tested, It works in IE and FireFox but not in Chrome

with display:none, you are not hidden any element, you are putting the element completely out of the web flow. Try visibility:hidden insteed — Alvaro Menéndez, Sep 19 '14 at 13:44
@Alvaro I replaced `display:none;` with `visibility:hidden;` and `visibility:collapse;`. It didn't solve the problem. — Ormoz, Sep 19 '14 at 13:51
A fiddle showing the problems may help us finding a solution (if any) — Alvaro Menéndez, Sep 19 '14 at 13:54
@Alvaro Here I made a [fiddle](http://jsfiddle.net/fxh34nyf/). It works in Firefox and IE, but not in Chrome — Ormoz, Sep 19 '14 at 14:15

score 1 · Answer 1 · answered Sep 19 '14 at 13:57

1

You should try this. It works, but keep in mind it is html5.

<input type="file" tabindex="-1">

answered Sep 19 '14 at 13:57

Shawn

51
1

How to make a non-displayed input or its label `keyboard tab stoppable`?

1 Answers1