HTML文件输入框美化
行也成文 7/30/2019 js
文件输入框是最最顽固的一类输入框，一般操作对它毫无效果，所以在这里介绍一点儿小思路。
# 思路
这里我的思路是把 input 框用一个 div 包裹起来，把 input 框的不透明度设成 0（完全透明），然后给父元素设置背景图，达到美化的效果
# 实现步骤
首先，准备了一个index.html文件和一张图片
-
-- index.html
-- upload.png
1
2
3
2
3
先创建一个文件上传按钮，并用一个div包裹起来
<div class="upload-container">
<input class="upload-btn" type="file">
</div>
1
2
3
2
3
效果大概像这样
然后我们添加样式。
<div class="upload-container">
<input class="upload-btn" type="file">
</div>
<style>
/* 给input框的父元素添加一个背景图 */
.upload-container {
width: 100px;
height: 100px;
background: url('./upload.png') no-repeat center center;
background-size: 100% 100%;
}
.upload-btn {
width: 100%;
height: 100%;
/* 设置input框的不透明度为0，即完全透明 */
opacity: 0;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
当然，你还可以用定位的方式实现更多更优化的效果。比如没有图片的情况。
<div class="upload-container">
<input class="upload-btn" type="file">
<span class="upload-tip">请选择你需要的文件</span>
</div>
<style>
.upload-container {
/* 需要把父元素设成相对定位，才能把输入框锁在父元素内 */
position: relative;
width: 200px;
height: 40px;
border: #f2f2f2 solid 1px;
/* 输入框会有一部分内容超出，隐藏掉 */
overflow: hidden;
}
.upload-btn {
/* 撑满父元素 */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
}
.upload-tip {
/* 自定义提示文字样式 */
color: #007bff;
border-color: #007bff;
}
</style>
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
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
# 小心有坑
使用定位的方式，输入框如果撑满父元素，有一部分会超出你所设置的盒子宽度（如下图），导致盒子外部也可以点击，所以父元素必须要设置overflow。
好啦，大功告成。