2/14 修改 input 上传文件的css（ label 标签的运用 ）

写在前面 

　　以前第一次想修改input的时候，用的是 覆盖方法 就是通过定位来 将inpu 置于 设置了的盒子 的上面

　　然后设置 input 的 透明度为 0 

　　

　　这个样子后 也能对使用者来说，感觉一样的，但是作为写代码的总觉得哪里憋得慌

　　个人感觉 好像堵在那了 不美观

　　直到我知道 label 标签 （ css 基础 不扎实 ）

---

初步认识 label 

　　首先这里有个 form 

　　

 　　在浏览器里面可以看到是这个样子的

　　

　　一一对应

　　这个时候我们注意一下，每个 input 的 id

　　

 　　然后 写一堆 label 注意 label 的 for 

　　

 <form class="form">
            <input type="text" name="title" id="title" placeholder="请输入标题">
            <input type="checkbox" name="checkbox" id="checkbox">
            <input type="file" name="picture" id="picture" accept="image/png,image/gif,image/jpeg">
            <input type="submit" name="submit" id="submit">

            <label for="title">点击我输入( 然而没有什么用 )</label>
            <br>
            <label for="checkbox">点击我选择</label>
            <br>
            <label for="picture">点击我上传图片</label>
            <br>
            <label for="submit">点击我提交</label>

        </form>

　　接着我们还要一个重要的操作 就是将 input 全部不显示 

　　

　　浏览器中

　　

　　这个时候，自己可以实验一下，虽然有些没有响应 但是 最后提交那个 浏览器出现了这个

　　

　　出现了一些参数，说明 

　　　　label 标签的 for 属性值 绑定 与之相同的 id 属性值 的 input 标签

 　　有点绕

　　但是总能想清楚

　　当然，这里 也可以这么用 （ 直接一个 label 框起来 ） 

　　

然后就是实际操作

　　这个还是自己写了吧 类似这种的 Vue 框架

　　

 总结

　　今天水了一下，出去拍照去了

　　有点累

　　明天把这个组件写出来