自定义input file样式

Posted 2021-01-30 bluealine

html

<div class="costs-uploadfile-div">                             
	<input type="file" name="file" id="fileField"/> 
	<input type=‘text‘ id="textfield" placeholder="请选择文件!" /> 
	<button class="allBtn costs-marl15">浏览</button>
</div> 

css

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

js

document.getElementById("fileField").onchange = function() {
	  document.getElementById("textfield").value = document.getElementById("fileField").value;
}