样式在输入类型文件中没有选择文件的消息

Question

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

在输入类型文件“未选择文件”文本显示在浏览按钮前面。但我想在浏览按钮下方显示此文本。任何可能的解决方案？

Answer 1

＆＃13;

＆＃13;

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];
    }
};

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

＆＃13;

＆＃13;

.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
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;