標籤：技術 padding back microsoft hid style pointer city meta
原生<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>
原生HTML5 input type=file按鈕UI自訂
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
