实现自定义的文件输入有一种很老的方法。它可分为以下几类:
- 创建具有相对位置DIV包装器
- 创建一个按钮与任何设计
- 创建一个不透明度为零的大型浮动文件输入来捕获单击
代码如下
HTML代码
| 1 2 3 4 | <div class="upload-btn-wrapper"> <button class="btn">Upload a file</button> <input type="file" name="myfile" /> </div> |
CSS 3代码
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | .upload-btn-wrapper { position: relative; overflow: hidden; display: inline-block; } .btn { border: 2px solid gray; color: gray; background-color: white; padding: 8px 20px; border-radius: 8px; font-size: 20px; font-weight: bold; } .upload-btn-wrapper input[type=file] { font-size: 100px; position: absolute; left: 0; top: 0; opacity: 0; } |
样式如下图