input file上传文件样式美化

1.通过label标签的for属性绑定控件id
label标签的for属性与表单进行绑定包含显示绑定和隐式绑定

显示绑定：

代码如下

<label  for="upload">上传文件</label>
<input type="file" id="upload">

隐式绑定：在 label 标签中放入控件隐式地连接起来

label>上传input type=“file”></label

在这里插入图片描述

2.通过onclick点击按钮事件进行input操作
原理：
通过点击button按钮触发点击事件获取input中id
CSS3中multiple可以选择多个文件
在这里插入图片描述

1代码片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .top {
            height: 30px;
            width: 80px;
            background-color: cornflowerblue;
            font-size: 14px;
            line-height: 30px;
            cursor: pointer;
            display: inline-block;
            text-align: center;
            color: #fff;
            border-radius: 5px;
            border: 1px solid #666666;
            margin-left: 20px;
        }
    </style>
</head>
<body>
<button class="top" "document.getElementById('upload').click()">上传文件</button>
<input type="file" multiple id="upload" style="display:none;" />
</body>
</html>




第二种方法代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .top {
            height: 30px;
            width: 80px;
            background-color: #ff4400;
            font-size: 14px;
            line-height: 30px;
            cursor: pointer;
            display: inline-block;
            text-align: center;
            color: #fff;
            border-radius: 3px;
            margin-left: 20px;
        }
    </style>
</head>
<body>
<!--显示绑定-->
<label for="upload" class="top">上传文件</label>
<input type="file" multiple id="upload" style="display: none;" />
<!--隐式绑定-->
<label class="top">上传文件<input type="file" multiple style="display: none;" /></label>
</body>
</html>

input file上传文件样式美化

猜你喜欢