原生HTML5 input type=file按鈕UI自定義

時間 2019-11-21

標籤原生 html5 html input type file 按鈕自定義欄目 HTML5 简体版

原文原文鏈接

原生<input type="file" name="file" />長得太醜html

提高一下顏值ui

實現方案1、設置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>

推薦實現方案2、利用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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。