轻松用CSS修改input file文件上传控件样式

技术频道 - html技术

轻松用CSS修改input file文件上传控件样式

作者:admin 时间:2021-8-9 12:7:38 浏览:

多数情况下，我们都不想用input file文件上传控件的默认样式，因为那样的按钮显得太呆板了，也与网页（UI）整体设计格格不入。其实，我们可以很轻松的使用很少的代码，就能改变上传控件的默认样式。

input file文件上传控件的默认样式是这样的。

通过简单代码，可把控件样式改为这样（按钮、文字颜色、大小均可修改）。

这样的按钮样式，是不是比默认的更有设计感了？它可以根据网页（UI）的整体设计而改变其颜色及大小等样式，使之与版面完美搭配。

实现方法介绍

首先是设置了 opacity: 0;使得 input 变得不可见了。

.inputFile{
    opacity: 0;
}
<input class="inputFile" id="inputFile" type="file" />

然后做一个模仿的“选择文件”的按钮。

.upload{
    width: 70px;
    padding: 4px 10px;
    line-height:25px;
    position: relative;
    border: 1px solid #999;
    text-decoration: none;
    color: #333;
    background-color:#FFF2B8;
}
.inputFile{
    opacity: 0;
}
<div href="javascript:;" class="upload">选择文件
    <input class="inputFile" id="inputFile" type="file" />
</div>

这里的设计关键是，要将这两个元素“叠加”在一起，所以要用上position这个属性。

.inputFile{
    position: absolute;
    overflow: hidden;
    right: 0;
    top: 0;
    opacity: 0;
}

还要添加一个显示上传文件名的div，这里需要用到一条JavaScript语句来赋值。

.fileInfo{
  float:left;
  position:relative;
  margin-left: 100px;
  margin-top:-30px;
}

<div class="container">
  <div href="javascript:;" class="upload">选择文件
    <input class="inputFile" id="inputFile" type="file" onchange="javascript:{document.getElementById('fileInfo').innerHTML = document.getElementById('inputFile').value}" />
  </div>
  <div id="fileInfo" class="fileInfo"></div>
</div>

完整HTML代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Css FIle Upload</title>
  
<style>

* {
  margin: 0;
  padding: 0;
  font-family: 微软雅黑;

}

body {
  padding: 55px 25px;
}

.container{
   width:auto;
}

.upload{
    width: 70px;
    padding: 4px 10px;
line-height:25px;
    position: relative;
    border: 1px solid #999;
    text-decoration: none;
    color: #333;
background-color:#FFF2B8;
}
.inputFile{
    position: absolute;
    overflow: hidden;
    right: 0;
    top: 0;
    opacity: 0;
}

.fileInfo{
    float:left;
    position:relative;
    margin-left: 100px;
    margin-top:-30px;
}

</style>

</head>

<body>
<div class="container">
  <div href="javascript:;" class="upload">选择文件
    <input class="inputFile" id="inputFile" type="file" onchange="javascript:{document.getElementById('fileInfo').innerHTML = document.getElementById('inputFile').value}" />
  </div>
  <div id="fileInfo" class="fileInfo"></div>
</div>
</body>

</html>