[转]CSS美化上传控件input type="file"的两种样式

文章来源:
http://www.jb51.net/web/39559.html
http://ons.me/384.html

网页上很多时候会用到上传控件,但是默认的样式不但很丑,而且每个浏览器的样式还不统一(如下图)。而直接对input type=”file”定义样式很难实现漂亮的外观,因为很多样式都无效,所以就要通过其他方法在保留上传功能的同时,美化上传控件。

上传控件在浏览器里的样子

在网上搜到2个例子,很不错,今天就分享一下。版权不知道归谁所有,因为不知道作者是谁。

先看DEMO,下面是效果图:

美化后的上传控件

具体代码右键都看得见,我就不复制了。只简单讲一下原理。

第一种的原理是文本框和按钮模拟上传控件,真正的上传控件设置成100%透明了,所以看不见,而且定位在模拟的上面。这样用户点击模拟控件时,其实是在点击真正的上传控件。顺便注意2点:1、size属性是设置上传控件的宽度,你可以把数字设置很小,然后点击模拟控件,有的地方是不会有反应的,特别是按钮那边;2、onchange=”document.getElementById(‘file_text’).value=this.value”的作用是把原本上传控件上的文件名和具体地址赋值给文本框,这样看起来更真实。当然,如果你跟我一样有洁癖,不喜欢在html上写js,可以写到js文件里。

第二种的原理更简单,直接用一个div把上传控件包住,固定大小和上传图标一样就OK了。

以上两种方法兼容IE6/7/8、Chrome、Firefox、Opera、Safari。当然,并非完美,因为上传控件不好控制高度。例如第二种方法,如果上传按钮很高,那么图标的每一个区域在某些浏览器里并非点击都有效,特别是按钮下方,所以测试后自己取舍吧。

 

 

 

 

为什么要美化file控件?试想一下,别的孩子都穿戴整齐漂亮,其中两个孩子怎么都不鸟你,太不和谐了。

    原始的file控件是这样的:

    image

    别以为这个是由一个text和一个button组合成的,它是一个控件,html代码为:

既然这样我们就用一个text和一个button来显示这个file的样式,html代码是这样:

外面的一层div是为了给里面的input提供位置参考,因为写样式的时候需要相对定位,使真正的file控件覆盖在模拟的上面,然后隐藏掉file控件(即使file控件不可见),所以css代码是这样的:

效果图:
点击查看原图
DEMO:

发表评论

电子邮件地址不会被公开。 必填项已用*标注