码迷,mamicode.com
首页 > 其他好文 > 详细

自定义input file样式

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

标签:idt   cost   css   sts   opacity   border   自定义   llb   get   

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

标签:idt   cost   css   sts   opacity   border   自定义   llb   get   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!