原生<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. 查看html元素绑定的事件与方法的利器

    WEB标准提倡结构.表现和行为相 分离,现在越来越多采用这种表现和行为的方式,但它也为我们开发调试带来一些问题,网页载入一堆JavaScript,,我们很难搞清楚最后在哪些元素的哪个动作绑定了事件,尤 ...

  2. Performance Monitor1：开始性能监控

    Performance Monitor是Windows内置的一个可视化监控工具,能够在OS级别上实时记录系统资源的使用情况,通过收集和存储日志数据,在SQL Server发生异常时,能够还原系统当时的 ...

  3. Cordova+Asp.net Mvc+GIS跨平台移动应用开发实战1-系统初步搭建（附演示,apk,全部源码）

    1.前言 身处在移动互联网的今天,移动应用开发炙手可热,身为程序猿的我们怎么能错过开发一款我们自己的APP.本人算是一个基于.net的GIS开发入门者(马上就大四啦), 暑假在学校参加GIS比赛有大把 ...

  4. 2014 年最热门的国人开发开源软件 TOP 100 - 开源中国社区

    不知道从什么时候开始,很多一说起国产好像就非常愤慨,其实大可不必.做开源中国六年有余,这六年时间国内的开源蓬勃发展,从一开始的使用到贡献,到推出自己很多的开源软件,而且还有很多软件被国外的认可.中国是 ...

  5. Android ViewPager切换之PageTransformer接口中transformPage方法解析

    今天让我们了解一下,Android3.0之后ViewPager切换时候的一个动画.Google给我们展示了两个动画例子:DepthPageTransformer和ZoomOutPageTransfor ...

  6. Full Gc经历分析

    背景: 个别机器:内存突然上升,cpu利用率升高. 解决过程 1. jmap dump整个内存镜像 2. 整个文件700多M,使用Jhat打不开 3. 换heapanalyzer,能打开,但没有分析出 ...

  7. C# 中使用Word文档对图像进行操作

    C# 中使用Word文档对图像进行操作 Download Files: ImageOperationsInWord.zip 简介 在这篇文章中我们可以学到在C#程序中使用一个Word文档对图像的各种操 ...

  8. sed命令使用详解归纳

    用法 sed [option] 'Address Command' yourfile e.g. sed -n '2,13p' lineuser #打印文件lineuser中第2~13行的内容,-n为o ...

  9. openfire 初始密码

    openfire 初始密码 mssql2014 进入数据库,找到 ofUser 表 ,将密码字段对应的密文替换为下面的内容,则密码就是 admin ecbd03623cd819c48718db1b27 ...

  10. android Can't bind to local 86XX for debugger

    For some reason eclipse DDMS always gives the error 'Can't bind to local 86XX for debugger' every ti ...