干货分享,灵感创作,不定期更新,敬请期待。

HTML前端观察–如何做一个漂亮的上传控件

HTML xhq 2034℃ 0评论

 

浏览器下的文件上传控件按钮通常是如图1.0所示,默认是很丑很丑的

如何做一个漂亮的上传控件图1.0

那要怎样才能做一个漂亮的上传按钮呢,如图1.1是原网页的按钮

如何做一个漂亮的上传控件图1.1

下面,我们来分析一下,如图1.2,在<input type=”file”>外面加一个父级元素div,这个父级元素按正常排版就行了,然后position属性设置为relative,其实此时上传控件并没有隐藏掉的,继续往后看

如何做一个漂亮的上传控件图1.2

如图1.3所示,在父级元素position:relative(或absolute)的情况下,子元素position:absolute;就相对父级元素定位,否则默认情况下相对于窗口定位,此时left:0,right:0就是要重合的趋势了,重合为了什么,就是为了能够点击弹出上传窗口呀,可是光重合也不美观,所以可以把透明度设为0,等等,position:absolute的情况下宽度和高度默认不是块元素,所以要设为块元素,再把款高度设为合适大小,哈哈,ok了

如何做一个漂亮的上传控件图1.3

如图1.4,最后我们把背景图片显示出来就ok了

如何做一个漂亮的上传控件图1.4

转载请注明:爱游思 » HTML前端观察–如何做一个漂亮的上传控件

喜欢 (0)

您必须 登录 才能发表评论!

(1)个小伙伴在吐槽
  1. test
    king2015-05-24 10:28