如何在輸入文件中不顯示當前選中的文件

Question

有沒有辦法在文件輸入中不顯示當前選中的文件？ 我只希望按鈕選擇顯示。 如果有幫助，我使用的是Bootstrap 3.3.2。

Answer 1

來完成它而不是訴諸JavaScript，您可以在標籤包裝它，並移動控制關屏：

HTML：

<label class="file-container"> 
    Open file... 
    <input type="file"> 
</label> 

CSS：

.file-container { 
    overflow: hidden; 
    position: relative; 
    border-radius: 4px; 
    border: 1px solid; 
    border-color: #ccc; 
    float: left; 
    padding: .5em;  
} 

.file-container [type=file] { 
    cursor: inherit; 
    display: block; 
    font-size: 999px; 
    filter: alpha(opacity=0); 
    min-height: 100%; 
    min-width: 100%; 
    opacity: 0; 
    position: absolute; 
    right: 0; 
    text-align: right; 
    top: 0; 
} 

JSFiddle