如何製作非顯示輸入或其標籤`keyboard tab stoppable`？

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

，並把背景爲其label：

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

這種方式工作得很好，但它已經推出了另一個問題：鍵盤選項卡不停止在此按鈕及其標籤上。我試着用tabindex="0"沒有結果。有沒有什麼辦法停止這個隱藏按鈕上的鍵盤標籤？

當然，我更喜歡純粹的CSS解決方案，但javascript解決方案（無jQuery）也是可以接受的。

感謝分享

UPDATE：這是一個fiddle of the problem。我測試過，它適用於IE和FireFox，但不適用於Chrome

2014-09-19 Ormoz

顯示：無，您沒有隱藏任何元素，您將元素完全移出Web流。嘗試可見性：隱藏保險 – 2014-09-19 13:44:50

@Alvaro我用'visibility：hidden;'和'visibility：collapse;'替換了'display：none;''。它沒有解決問題。 – Ormoz 2014-09-19 13:51:05

顯示問題的小提琴可能幫助我們找到解決方案（如果有的話） – 2014-09-19 13:54:40

你應該試試這個。它有效，但請記住它是html5。

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

2014-09-19 13:57:00 Shawn

它不起作用 – Ormoz 2014-09-19 14:03:51

回答