原生<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. 不care小米，梁军坦言微鲸才是乐视最大对手

    除了每天毫无悬念地上头条和陷入困境的生态帝国之外,乐视还要继续操心着它的对手们."挑事儿"的小米已经不足为惧,后起之秀微鲸成了一个令它"头疼"的所在.因为,不仅 ...

  2. C#中Math类的计算整数的三种方法

    1.Math.Round:四舍六入五取偶 引用内容 Math.Round( Math.Round( Math.Round( Math.Round( Math.Round( Math.Round( Ma ...

  3. 事务复制5： Transaction and Command

    事务复制使用 dbo.msrepl_transactions 和 dbo.MSrepl_commands 存储用于数据同步的Transaction和Command.在replication中,每个co ...

  4. AngularJS之初级Route【一】（六）

    前言 这一节我们来讲讲AngularJS中的路由以及利用AngularJS在WebAPi中进行CRUD.下面我们一起来看看. 话题 当我们需要进行路由映射时即用到$route服务,在AngularJS ...

  5. 国内版Office 365和Azure AAD绑定的问题及解决方案

      背景: 1． 开发人员要做的事情,是希望在应用程序里面能调用Office 365 的API(Microsoft Graph)来动态添加Office 365账号 2． 如果需要调用这些API,必须在 ...

  6. [c++] Smart Pointers

    内存管理方面的知识 基础实例: #include <iostream> #include <stack> #include <memory> using names ...

  7. C++基础知识

    基础知识 &&和||具有"短路"特性,特别是在第二个操作数有++或--时要注意. 显式类型转换 (类型说明符)表达式 //C风格的 类型说明符(表达式) //cpp ...

  8. SFC中的问题描述

    本文主要描述了在大规模的网络环境中部署服务功能存在的一些问题,还提出了几个关键领域,即SFC工作组将要探讨的关于SFC结构.工作协议.相关文档. 1.问题描述 SFC工作组致力于解决的几个服务部署中存 ...

  9. [AngularJS] AngularJS系列(5) 中级篇之动画

    目录 CSS定义 JS定义 ng动画实际帮我们在状态切换的时候 添加特定的样式 从而实现动画效果. 一般我们会通过C3来实现具体的动画. CSS定义 ng-if 图(实际上,图并不能展现出什么): H ...

  10. Using Nuget in Visual Studio 2005 & 2008

    NuGet is a Visual Studio extension that makes it easy to install and update third-party libraries an ...