原生<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. MongoDB 维护Replica Set

    在每个MongoDB(版本 3.2.9) Instance中,都有一个本地数据库(local),用于存储 Replication 进程的信息和本地数据.local 数据库的特性是:位于local数据库 ...

  2. Latch2：Latch和性能

    1,数据的IO操作 SQL Server访问的任何一个Page必须存在于内存中,如果不存在于内存中,那么SQL Server发出 Disk IO请求,将数据页从Disk读取到内存中,然后SQL Ser ...

  3. Security10：授予访问Object的权限

    1,将访问Object的权限授予Database Role 或 User 的语法如下 GRANT <permission> [ ,...n ] ON [ OBJECT :: ][ sche ...

  4. C#设计模式系列：代理模式（Proxy）

    代理模式提供了一个中介控制对某个对象的访问.现实生活中,我们可能会用支票在市场交易中用来代替现金,支票就是账户中资金的代理. 1.代理模式简介 1.1>.定义 代理模式(Proxy)定义:代理模 ...

  5. ExtJs4之Grid详细

    ExtJs博客前奏 由于这段时间事情比较杂乱,博客就主要以项目中例子来说明编写. ExtJs4中的Grid非常强大,有展示,选中,搜索,排序,编辑,拖拽等基本功能,这篇博客我就这几个功能做写累述. 1 ...

  6. 移动web app开发必备 - 异步队列 Deferred

    背景 移动web app开发,异步代码是时常的事,比如有常见的异步操作: Ajax(XMLHttpRequest) Image Tag,Script Tag,iframe(原理类似) setTimeo ...

  7. OpenCASCADE Performance Test

    OpenCASCADE Performance Test eryar@163.com Abstract. Use the Draw Test Harness to test the performan ...

  8. Java-Spring:java.lang.ClassCastException: com.sun.proxy.$Proxy* cannot be cast to***问题解决方案

    java.lang.ClassCastException: com.sun.proxy.$Proxy* cannot be cast to***问题解决方案 临床表现: 病例: 定义代理类: @Tra ...

  9. ++a和a++的区别。

    先来看2段js代码 var a=0; var b=0; while(a<10) { document.write(a++); } document .write("<br> ...

  10. IIS与ASP.NET管道

    IIS 5.x与ASP.NET 我们先来看看IIS 5.x是如何处理基于ASP.NET资源(比如.aspx,.asmx等)请求的,整个过程基本上可以通过图1体现. IIS 5.x运行在进程InetIn ...