好久没写随笔啦 懒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"> 配合使用。它规定能够通过文件上传进行提交的文件类型。