自定义文件上传按钮样式

程小秋

于 2017-09-11 14:15:02 发布

阅读量1.2k

点赞数 2

分类专栏： CSS3

本文链接：https://blog.youkuaiyun.com/golden_wheat/article/details/77932296

版权

CSS3 专栏收录该内容

15 篇文章

订阅专栏

这篇博客介绍了如何修改默认的文件上传<input type='file'>元素样式，以符合个人或项目的风格需求。作者提供了自定义样式的实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自定义文件上传按钮样式

在写上传文件时,<input type="file">的样式是下面这样的

一般都不是自己想要的风格，下面来自己制定想要的样式

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css">
  <style>
  .fileinput-button {
      position: relative;
      display: inline-block;
      overflow: hidden;
  }
  .fileinput-button input {
      position: absolute;
      right: 0;
      top: 0;
      opacity: 0;
      -ms-filter: 'alpha(opacity=0)';
      font-size: 200px;
      cursor: pointer;
  }
  </style>
</head>
<body>
    <form>
        <span class="btn btn-success fileinput-button">
            <span class="glyphicon glyphicon-plus"></span>
            <span>选择上传文件</span>
            <input type="file"> 
        </span>
    </form>
</body>
</html>