造型在輸入文件類型中沒有文件選擇信息

Question

<input type="file" class="brows-down"> 

在瀏覽按鈕前面的輸入文件「無文件選擇」文本顯示。但是我想在瀏覽按鈕下面顯示這個文本。任何可能的解

Answer 1

.left { 
 
    float: left; 
 
} 
 

 
.both { 
 
    clear: both; 
 
} 
 

 
.file-upload-container { 
 
    width:400px; 
 
    border: 1px solid #efefef; 
 
    padding:10px; 
 
    border-radius: 6px; 
 
    -webkit-border-radius: 6px; 
 
    -moz-border-radius: 6px; 
 
    background: #fbfbfa; 
 
} 
 

 
.file-upload-override-button { 
 
    position: relative; 
 
    overflow: hidden; 
 
    cursor: pointer; 
 
    background-color:#79bbff; 
 
} 
 

 
.file-upload-override-button:hover { 
 
    background-color:#378de5; 
 
} 
 

 
.file-upload-override-button:active { 
 
    position:relative; top:1px; 
 
} 
 

 
.file-upload-button { 
 
    position: absolute; 
 
    height: 50px; 
 
    top: -10px; 
 
    left: -10px; 
 
    cursor: pointer; 
 
    opacity: 0; 
 
    filter:alpha(opacity=0); 
 
} 
 

 
.file-upload-filename { 
 
    margin-top: 10px; 
 
    height: auto; 
 
    clear:both; 
 
    float:left 
 
}

<div class="file-upload-container"> 
 
    <div class="file-upload-override-button left"> 
 
     Choose file 
 
     <input type="file" class="file-upload-button" id="file-upload-button"/> 
 
    </div> 
 
    <div class="file-upload-filename left" id="file-upload-filename">No file selected</div> 
 
    <div class="both"></div> 
 
</div>

Answer 2

window.pressed = function(){ 
 
    var a = document.getElementById('aa'); 
 
    if(a.value == "") 
 
    { 
 
     fileLabel.innerHTML = "No File Selected"; 
 
    } 
 
    else 
 
    { 
 
     var theSplit = a.value.split('\\'); 
 
     fileLabel.innerHTML = theSplit[theSplit.length-1]; 
 
    } 
 
};

input[type=file]{ 
 
    width:90px; 
 
    color:transparent; 
 
} 
 
label{ 
 
    display:block; 
 
}

<div><input type='file' title="Choose a video please" id="aa" onchange="pressed()"><label id="fileLabel">No File Selected</label></div>