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

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

专注于为中小企业提供成都做网站、网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业湖里免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了1000+企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。

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

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

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

例子:

html部分:


点击上传

css部分:

就是这样的效果啦:web开发中如何自定义上传按钮样式

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


网站题目:web开发中如何自定义上传按钮样式
URL网址:http://scyanting.com/article/gdigsg.html

其他资讯