input type=file 上传文件样式美化

来源：https://www.jianshu.com/p/6390595e5a36

在做input文本上传时，由于html原生的上传按钮比较丑，需要对其进行美化，radio和checkbox类似

主要想到以下几种方法，欢迎大家补充

1. 通过position和opacity实现

  • input设置：透明度为0，position为绝对定位，font-size足够大
  • input外面套一层a或div等标签（此处以a举例），a设置：position为相对定位，overflow: hidden（为了避免在非a区域点击打开选择文件）

代码如下：

<html>

<head>

  <style>

    .ui-upload {

      font-size: 14px;

      width: 80px;

      height: 30px;

      line-height: 30px;

      text-align: center;

      position: relative;

      cursor: pointer;

      color: #fff;

      background: #00abff;

      border-radius: 3px;

      overflow: hidden;

      display: inline-block;

      text-decoration: none;

    }

    .ui-upload input {

      position: absolute;

      font-size: 100px;

      right: 0;

      top: 0;

      opacity: 0;

      filter: alpha(opacity=0);

      cursor: pointer

    }

  </style>

</head>

<body>

  <a href="javascript:;" class="ui-upload">

    <input type="file" />upload

  </a>

</body>

</html>

2. 通过label标签的for属性实现

for 属性规定了label与哪个表单元素进行绑定，包含显式联系和隐式联系两种

  • 显式联系：

以显式形式和控件联系起来，for属性的值和控件的id要保持一致

<label for="upload">upload</label>

<input type="file" id="upload" />
  • 隐式联系：

在 <label> 标签中放入控件隐式地连接起来

<label>uplaod<input type="file" /></label>

代码如下：

<html>

<head>

  <style>

    .ui-upload {

      height: 30px;

      width: 80px;

      background-color: #00abff;

      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="ui-upload">upload</label>

  <input type="file" id="upload" style="display: none;" />

  <label class="ui-upload">upload<input type="file" style="display: none;" /></label>

</body>

</html>

3. 通过onclick事件获取input操作
代码如下：

<html>

<head>

  <style>

    .ui-upload {

      height: 30px;

      width: 80px;

      background-color: #00abff;

      font-size: 14px;

      line-height: 30px;

      cursor: pointer;

      display: inline-block;

      text-align: center;

      color: #fff;

      border-radius: 3px;

      border: 0px;

      margin-left: 20px;

    }

  </style>

</head>

<body>

  <button class="ui-upload" onclick="document.getElementById('upload').click()">upload</button>

  <input type="file" id="upload" style="display:none;" />

</body>

</html>

结论

本文推荐大家使用第二种label标签实现，因为它不需要繁琐css定位，也不需要通过事件绑定。

input type=file 上传文件样式美化（转载）的更多相关文章

  1. 自定义type='file'上传文件样式

    改变默认的上传文件样式: 用label作为替代 <input id="file_-1" type="file" name="file" ...

  2. HTML <input type="file">上传文件——结合asp.net的一个文件上传示例

    HTML的代码:(关键是要在form里设置enctype="multipart/form-data",这样才能在提交表单时,将文件以二进制流的形式传输到服务器) 一. <fo ...

  3. input type file上传文件之后清空内容。

    上次写过如何上传文件,上传成功之后,会出现一些问题. 当我打开上传的文件,但是没有点击上传,然后关闭弹窗,接着继续上传刚才的那个文件.为了满足产品组的要求,我们一般都会把样式进行一定的覆盖. 但这就会 ...

  4. jquery判断 input type="file"上传文件是否为空

    要想获取type="file"的input内容,用var file = $("id").val();肯定是不行的,下面是代码: html上传按钮为: <i ...

  5. <input type="file">上传文件并添加路径到数据库

    注:这里是用的mvc所以没法用控件 html代码 <form method="post" enctype="multipart/form-data"> ...

  6. input type='file' 上传文件 判断图片的大小是否合格与witdh 和 height 是否合格

    function CheckFiles(obj) { var array = new Array('gif', 'jpeg', 'png', 'jpg'); //可以上传的文件类型 if (obj.v ...

  7. onclick事件触发 input type=“file” 上传文件

    添加按钮: <input type="button" name="button" value="浏览" onclick="j ...

  8. input[type=file]上传文件（格式判断、文件大小、上传成功后操作）

    var isUploadImg = false; //在input file内容改变的时候触发事件******************上传图片 $('#filed').change(function( ...

  9. 使用 input[type=file]上传文件

    var $file = $('#file'); $('#btn').click(function() { var data = new FormData(); data.append('file', ...

随机推荐

  1. 阿里云，未找到或无法访问服务器.请验证实例名称是否正确并且 SQL Server 已配置为允许远程连接.

    阿里云主机使用SQL Server作为数据库服务器,连接数据库时候出现错误. 按照网上经验,检查SQL服务是否开启,sa用户权限,数据库安全性和连接权限: 关闭服务器防火墙,修改入站规则: 检查阿里云 ...

  2. Python之旅Day4 闭包函数 模块及模块倒入

    闭包函数 闭包函数就是在内部函数当中有对外部函数名字的引用 ###代码示例1### def f1(): x =1 def f2(): print(x) return f2 f=f1() f() ### ...

  3. scrapy 中 xpath 用string方法提取带有空格符解决方法

    注释掉的是刚开始的代码,匹配的全是带空格的,replace替换不了空格 后面加上了normalize-space()  匹配到的文本内容变成了可replace 问题解决

  4. JavaScript（变量、作用域和内存问题）

    JavaScript是一个变量松散型的语言.(不像Java一样强类型语言.) JavaScript变量包括两种:基本类型(简单的数据段)和引用类型(对象). 一.基本数据类型(5种) Undefine ...

  5. 2017年全国大学生物联网设计竞赛（TI杯）华东分赛区决赛总结

    全国大学生物联网设计竞赛(TI杯)是由教育部高等学校计算机类教学指导委员会主办.上海交通大学电子信息与电气工程学院承办.德州仪器半导体技术公司(TI)协办的赛事,自2014年设立以来,一直是物联网领域 ...

  6. vue-router的history模式发布配置

    如果你正在尝试将基于vue-router的项目部署到windows中,希望本文能够有所帮助. iis配置 无需安装其他组件,将错误页指向index.html即可 <?xml version=&q ...

  7. 【sql注入教程】mysql注入直接getshell

    Mysql注入直接getshell的条件相对来说比较苛刻点把 1:要知道网站绝对路径,可以通过报错,phpinfo界面,404界面等一些方式知道 2:gpc没有开启,开启了单引号被转义了,语句就不能正 ...

  8. Java工程师必备

    Java工程师必备 JAVA基础扎实,熟悉JVM,熟悉网络.多线程.分布式编程及性能调优 精通Java EE相关技术 熟练运用Spring/SpringBoot/MyBatis等基础框架 熟悉分布式系 ...

  9. 第53节:Java当中的IO流(上)

    Java当中的IO流 在Java中,字符串string可以用来操作文本数据内容,字符串缓冲区是什么呢?其实就是个容器,也是用来存储很多的数据类型的字符串,基本数据类型包装类的出现可以用来解决字符串和基 ...

  10. JMH实践-代码性能测试工具

    概述 JMH,即Java Microbenchmark Harness,是专门用于代码微基准测试的工具套件 JMH比较典型的应用场景有: 想准确的知道某个方法需要执行多长时间,以及执行时间和输入之间的 ...