为type=file的input标签制定样式——CSS基础

1. 概述

在现在的前端开发中，为了开发的效率，大都会引入第三方库加快开发速度。查阅官方文档，一顿复制黏贴，是的，这就是面向百度、面向谷歌编程，但是基础总是重要的——本文章记录一下之前遇到的小坑，并对其进行解析。

---

2. 实验

实验目的：我们想要为type=file的input标签制定样式

默认的样式如图

<input type="file">

现在我们想要改成下图的效果

然后我们直接用行内样式来书写

<input type="file" style="background:#333;color: #fff;">

但是得到的结果如下图所示

这并不是我们想要的结果

---

3. 解决方法与解析

首先，你要知道 label与input是可以成对出现并且绑定的

用 for 绑定后，点击 label 和点击 input 的效果是相同的，点击 label 同样会触发“选择文件”的功能

---

所以我们这样写

<label for="btn">上传文件</label>
<input id="btn" type="file" style="display: none;">

这里把 input 设置成了不可见

然后对 label 加样式就可以了~

label 样式如下：

label {
      display: inline-block;
      padding: 0.3rem 1rem;
      background: #333;
      color: #fff;
      border-radius: 0.3rem;
      font-size: x-small;
      cursor: pointer;
    }

至于别的更好看的特效，那就自由发挥就行了，共勉~