`
流浪鱼
  • 浏览: 1632848 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

自定义上传按钮

 
阅读更多

采用样式文件定义一个按钮,然后让file按钮覆盖到自定义按钮上

html结构如下:

<div class="dfile">
   <span>
      <input type="button" class="inp_btn" value="浏 览">
      <input name="FILE_URL" type="file" style="width: 62px" class="inp_file" onchange="file_Upload(this)">
   </span>
</div>

 样式:

.dfile {
display: inline-block;
position: relative;
width: 75px;
}

.dfile .inp_btn {
width: 75px;
height: 30px;
padding: 0px;
text-align: center;
cursor: pointer;
}

.dfile .inp_file {
position: absolute;
left: 0;
top: 0;
width: 75px;
height: 30px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
-moz-opacity: 0;
-webkit-opacity: 0;
}

 通过样式inp_file,可以看出是给文件选择框添加了绝对定位并且完全透明 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics