首页 > 其他 > 详细

自定义input file样式

时间:2018-12-27 12:50:22      阅读:170      评论:0      收藏:0      [点我收藏+]

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

  

自定义input file样式

原文:https://www.cnblogs.com/bluealine/p/10184202.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!