原生<input type="file" name="file" />长得太丑
提升一下颜值
实现方案一、设置input[type=file]透明度为0，使用绝对定位遮罩在自定义的按钮标签层的之上.
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>原生HTML5 input type=file按钮UI自定义</title>
6 <style>
7 .file_upload_box {
8 display: inline-block;
9 width: 200px;
10 height: 60px;
11 position: relative;
12 overflow: hidden;
13 }
14 .file_upload_box input[type=file] {
15 position: absolute;
16 left: 0;
17 top: 0;
18 width: 100%;
19 line-height: 60px;
20 opacity: 0;
21 cursor: pointer;
22 }
23 .file_upload_box a {
24 display: inline-block;
25 width: 100%;
26 line-height: 45px;
27 text-align: center;
28 font-family: "Microsoft yahei";
29 background-color: #f60;
30 color: #FFF;
31 font-weight: 700;
32 text-decoration: none;
33 }
34 </style>
35 </head>
36 <body>
37 <div class="file_upload_box">
38 <input type="file" name="file" />
39 <a href="#none">上传文件</a>
40 </div>
41 </body>
42 </html>
推荐实现方案二、利用label的for属性(for 属性规定 label 绑定到哪个表单元素)
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>原生HTML5 input type=file按钮UI自定义</title>
6 <style>
7 .ui_button {
8 display: inline-block;
9 line-height: 45px;
10 padding: 0 70px;
11 color: #FFFFFF;
12 font-family: "微软雅黑";
13 font-weight: 700;
14 cursor: pointer;
15 }
16 .ui_button_primary {
17 background-color: #FF6600;
18 }
19 label.ui_button:hover {
20 background-color: #d46216;
21 }
22 </style>
23 </head>
24 <body>
25 <label class="ui_button ui_button_primary" for="xFile">上传文件</label>
26 <form><input type="file" id="xFile" style="position:absolute;clip:rect(0 0 0 0);"/></form>
27 </body>
28 </html>
时间： 2024-12-15 10:38:46