web开发中如何自定义上传按钮样式

这篇文章将为大家详细讲解有关web开发中如何自定义上传按钮样式，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

用input本身的属性做的上传按钮，在不同的浏览器中长得都不一样。如下图的几个：

但是对input设置的样式只能加在输入框上，对上传按钮根本不起作用。那么有一个超级简单的方法，就是先用一个div制作你要的上传按钮的样式，将实际的上传按钮input设置透明，并定位在设置样式的div上面。

例子：

html部分：

<div >
<div >点击上传</div>
<input type="file" >
</div>

CSS部分：

<style>
.div1 {
position: relative;
}

.div2 {
width: 100px;
height: 36px;
background: #2178fc;
color: #fff;
text-align: center;
line-height: 36px;
}

.file_input {
width: 200px;
height: 36px;
position: absolute;
left: -100px;
top: 0;
z-index:1;
-moz-opacity: 0;
-ms-opacity: 0;
-WEBkit-opacity: 0;
opacity: 0; 
filter: alpha(opacity=0); 
cursor: pointer;
}
</style>

就是这样的效果啦:

关于“web开发中如何自定义上传按钮样式”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。