文件上传图片覆盖在上传框上

CSS技巧：隐藏文件输入框

最新推荐文章于 2024-08-29 21:19:22 发布

原创最新推荐文章于 2024-08-29 21:19:22 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种使用CSS技巧来隐藏HTML文件输入框的方法，并通过设置透明度和绝对定位实现美观的自定义上传按钮样式。

1.css部分代码

.input-file:hover {
	background:#ccc;
	cursor: pointer;
}
.input-file {
	display:inline-block;
	margin:0 0 0 0 !important;
	position:relative;
}

.input-file input {
	opacity:0;
	filter:alpha(opacity=0);
	font-size:100px;
	position:absolute;
	top:0;
	right:0;

2.html页面这里div.input-file换成其它标签同样有效

 <div class="input-file" type="button"  onclick="">
        <img src="ico31.png" /> 
          <input type="file" style="height:50px;width:100%;" id="file" name="files[]" multiple  /> 
       </div>

3.用绝对定位和相对定位把file上传框和图片重叠，把fie上传框透明度设为0