自定義input file樣式

 

<div class="costs-uploadfile-div">                             
    <input type="file" name="file" id="fileField"  onchange="document.getElementById('textfield').value=this.value" /> 
    <input type='text' id="textfield" /> 
    <button class="allBtn costs-marl15">瀏覽</button>
    <button class="allBtn costs-marl15">上傳</button>
</div>



div.costs-uploadfile-div{
    position:relative;
}
div.costs-uploadfile-div #textfield{
    width:150px;
    height:30px;    
}
div.costs-uploadfile-div #fileField{
    width:245px;
    height:30px;    
    position: absolute;
    top: 0;
    left:0;
    filter: alpha(opacity:0);
    opacity: 0;
}
div.costs-uploadfile-div .allBtn{
    padding:0;
    margin:0;
    height: 30px;
    line-height: 30px;
    width: 80px;
    background-color: #18b3cf;
    border: none;
    color: #fff;
    }