Как не показать файл, выбранный в текущем файле

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