9.18 文件上传按钮

好久没写随笔啦懒girl了

今天做的是一个上传文件的按钮做完长这样：

本来是这样的：

，有默认的选择文件按钮，只要把本来的file输入框的透明度调为0，然后通过position调整位置即可。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上传文件按钮</title>
    <style>
        .add-excel {
            font-size: 16px;
            text-align: center;
             120px;
            height: 30px;
            line-height: 30px;
            position: relative;
            border: 1px dashed #499efb;
        }
        .add-excel:hover {
            background: #499efb;
        }
        .file {
            opacity: 0;
            top: 4px;
            right: 0px;
            position: absolute;  
            /*父元素position为relative，子元素为absolute,那么子元素的top left 都是相对于父元素来定的*/
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="add-excel">
        添加EXCEL文件
        <input type="file" class="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
    </div>
</body>
</html>

accept 属性只能与 <input type="file"> 配合使用。它规定能够通过文件上传进行提交的文件类型。