原生<input type="file" name="file" />长得太丑

提升一下颜值

实现方案一、设置input[type=file]透明度为0，使用绝对定位遮罩在自定义的按钮标签层的之上.
 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title>原生HTML5 input type=file按钮UI自定义</title>

         <style>

             .file_upload_box {

                 display: inline-block;

                 width: 200px;

                 height: 60px;

                 position: relative;

                 overflow: hidden;

             }

             .file_upload_box input[type=file] {

                 position: absolute;

                 left: 0;

                 top: 0;

                 width: 100%;

                 line-height: 60px;

                 opacity: 0;

                 cursor: pointer;

             }

             .file_upload_box a {

                 display: inline-block;

                 width: 100%;

                 line-height: 45px;

                 text-align: center;

                 font-family: "Microsoft yahei";

                 background-color: #f60;

                 color: #FFF;

                 font-weight: 700;

                 text-decoration: none;

             }

         </style>

     </head>

     <body>

         <div class="file_upload_box">

             <input type="file" name="file" />

             <a href="#none">上传文件</a>

         </div>

     </body>

 </html>
推荐实现方案二、利用label的for属性(for 属性规定 label 绑定到哪个表单元素)
 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title>原生HTML5 input type=file按钮UI自定义</title>

         <style>

             .ui_button {

                 display: inline-block;

                 line-height: 45px;

                 padding: 0 70px;

                 color: #FFFFFF;

                 font-family: "微软雅黑";

                 font-weight: 700;

                 cursor: pointer;

             }

             .ui_button_primary {

                 background-color: #FF6600;

             }

             label.ui_button:hover {

                 background-color: #d46216;

             }

         </style>

     </head>

     <body>

         <label class="ui_button ui_button_primary" for="xFile">上传文件</label>

         <form><input type="file" id="xFile" style="position:absolute;clip:rect(0 0 0 0);"/></form>

     </body>

 </html>

原生HTML5 input type=file按钮UI自定义的更多相关文章

  1. input type= file 如何更改自定义的样式

    input { @include wh(24px,22px);//sass 宽高 @include pa(0,0); //绝对定位 top:0:left:0: opacity: 0; //透明度: o ...

  2. <input type="file">如何实现自定义样式

    利用样式覆盖来实现效果:先看下原本和改变后的样式 1 <!doctype html> 2 <html> 3 <head> 4 <title>file自定 ...

  3. html中，文件上传时使用的<input type="file">的样式自定义

    Web页面中,在需要上传文件时基本都会用到<input type="file">元素,它的默认样式: chrome下: IE下: 不管是上面哪种,样式都比较简单,和很多 ...

  4. 文件上传按钮input[type="file"]按钮美化时在IE8中的bug【兼容至IE8】

    首先看一下完成后的效果,鼠标移入可改变为手指的效果. 在此就不加图标了 <label class="file-upload"> <span>上传附件< ...

  5. 使用自定义的按钮替换默认的<input type='file'>

    可以通过让默认的input type = 'file'按钮透明度变为0,并且让它刚好覆盖在自定义的按钮上,来实现此效果: 将它写成一个jQuery插件: (function($){ $.fn.brow ...

  6. input type="file"使用

    问题: 在实际开发过程中,会遇到上传文件的一些需求.但是使用原生的<input type="file" />在使用中存在一些问题 在未上传文件时,显示"no ...

  7. vue项目内嵌入到app input type=file 坑（文件上传插件）

    w问题描述: 我用vue-cli完成的一个移动端项目,内嵌到app当中,用原生的input type=file 来完成文件上传.在安卓下没有问题但是在苹果手机 上传第二次手机就会发生白屏 并无缘无故跳 ...

  8. 自定义上传按钮 <input type="file" name = "file"/> (将file隐藏在button下)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  9. 自定义样式 实现文件控件input[type='file']

    一般我们设计的上传按钮都是和整个页面风格相似的样式,不会使用html原生态的上传按钮,但是怎么既自定义自己的样式,又能使用file控件功能呢? 思路是这样的: 1.定义一个相对定位的DIV,按照整成步 ...

随机推荐

  1. java中集合类中Collection接口中的List接口的常用方法熟悉

    1:集合类,在java语言中的java.util包提供了一些集合类,这些集合类又被称作容器. 2:区别集合类和数组.(1)数组的长度是固定的,集合的长度是可变的.(2)数组是用来存放基本数据类型的,集 ...

  2. gulp启动一个小型web服务器配置&browserify(require)

    var gulp = require('gulp'), connect = require('gulp-connect'), // 运行live reload服务器 browserify = requ ...

  3. SSIS Data Flow 的 Execution Tree 和 Data Pipeline

    一,Execution Tree 执行树是数据流组件(转换和适配器)基于同步关系所建立的逻辑分组,每一个分组都是一个执行树的开始和结束,也可以将执行树理解为一个缓冲区的开始和结束,即缓冲区的整个生命周 ...

  4. OpenCascade Primitives BRep-Cone

    OpenCascade Primitives BRep-Cone eryar@163.com Abstract. BRep is short for Boundary Representation. ...

  5. nodejs 使用fs实现多级联动

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA0gAAAEdCAIAAAC5WdDhAAAgAElEQVR4nO3da3Mc153f8X4feq5lFR

  6. 深入学习jQuery选择器系列第七篇——表单选择器

    × 目录 [1]表单元素 [2]对象属性 前面的话 无论是提交还是传递数据,表单元素在动态交互页面的作用是非常重要的.jQuery专门加入了表单选择器,从而能够极其方便地获取到某个类型的表单元素 表单 ...

  7. java自定义类加载器

    前言 java反射,最常用的Class.forName()方法.做毕设的时候,接收到代码字符串,通过 JavaCompiler将代码字符串生成A.class文件(存放在classpath下,也就是ec ...

  8. 配置 L2 Population - 每天5分钟玩转 OpenStack（114）

    前面我们学习了L2 Population 的原理,今天讨论如何在 Neutron 中配置和启用此特性. 目前 L2 Population 支持 VXLAN with Linux bridge 和 VX ...

  9. 重新理解：ASP.NET 异步编程

    相关博文: 异步编程 In .NET(回味无穷!!!) ASP.NET sync over async(异步中同步,什么鬼?) 本来这篇博文想探讨下异步中的异常操作,但自己在做异步测试的时候,又对 A ...

  10. geotrellis使用（四）geotrellis数据处理部分细节

    前面写了几篇博客介绍了Geotrellis的简单使用,具体链接在文后,今天我主要介绍一下Geotrellis在数据处理的过程中需要注意的细节,或者一些简单的经验技巧以供参考. 一.直接操作本地Geot ...