html自带的上传按钮非常丑,在HTML4+CSS2时,想要美化文件上传还是很麻烦了。
HTML5+CSS3后,就非常方便了,实例如下:
思路:
input file上传按钮的美化思路是,先把之前的按钮透明度opacity设置为0,然后,外层用div包裹,就实现了美化功能。
代码如下:
DOM结构:
1
2
|
< a href = "javascript:;" class = "a-upload" > < input type = "file" name = "" id = "" >点击这里上传文件</ a >< a href = "javascript:;" class = "file" >选择文件 < input type = "file" name = "" id = "" ></ a > |
CSS样式1:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
/*a upload */ .a-upload { padding : 4px 10px ; height : 20px ; line-height : 20px ; position : relative ; cursor : pointer ; color : #888 ; background : #fafafa ; border : 1px solid #ddd ; border-radius: 4px ; overflow : hidden ; display : inline- block ; * display : inline ; *zoom: 1 }.a-upload input { position : absolute ; font-size : 100px ; right : 0 ; top : 0 ; opacity: 0 ; filter: alpha(opacity= 0 ); cursor : pointer }.a-upload:hover { color : #444 ; background : #eee ; border-color : #ccc ; text-decoration : none } |
样式2:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
.file { position : relative ; display : inline- block ; background : #D0EEFF ; border : 1px solid #99D3F5 ; border-radius: 4px ; padding : 4px 12px ; overflow : hidden ; color : #1E88C7 ; text-decoration : none ; text-indent : 0 ; line-height : 20px ;}.file input { position : absolute ; font-size : 100px ; right : 0 ; top : 0 ; opacity: 0 ;}.file:hover { background : #AADFFD ; border-color : #78C3F3 ; color : #004974 ; text-decoration : none ;} |
样式一效果:
样式二效果: