原生<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. iOS-中app启动闪退的原因

    这种情况应和所谓的内存不足关系不大,很少有程序会在初始化时载入大量内容导致崩溃,并且这类问题也很容易在开发阶段被发现,所以内存不足造成秒退的可能性低(内存不足退,通常是程序用了一段时间,切换了几个画面 ...

  2. JS-underfined is not a function

  3. iTween 动画类型

    iTween 动画类型 http://robertpenner.com/easing/easing_demo.html 使用范例 http://www.xuanyusong.com/archives/ ...

  4. 【转】WPF TextBox和PasswordBox加水印

    Textbox加水印 Textbox加水印,需要一个VisualBrush和触发器验证Text是否为空,在空的时候设置背景的Brush就可以实现水印效果. <TextBox Name=" ...

  5. 【开源】OSharp框架解说系列（6.1）：日志系统设计

    OSharp是什么? OSharp是个快速开发框架,但不是一个大而全的包罗万象的框架,严格的说,OSharp中什么都没有实现.与其他大而全的框架最大的不同点,就是OSharp只做抽象封装,不做实现.依 ...

  6. 简单测试nginx1.90做TCP协议负载均衡的功能

    最近工作中需要做TCP层面的负载均衡,以前网站用的反向代理nginx只支持应用层的负载均衡,对于TCP协议是无能为力的,需要使用LVS(linux虚拟服务器). LVS的特点是高性能和极复杂的配置.对 ...

  7. EasyUI DataGrid 实用例子(2015-05-22)

    代码经过精心改良,可以直接使用,具体看注释吧. 1,前台,代码如下:         <%@ Page Language="C#" AutoEventWireup=" ...

  8. jquery EasyUI的formatter格式化函数代码

    要格式化数据表格列,需要设置formatter属性,该属性是一个函数,它包含两个参数:  value: 对应字段的当前列的值  record: 当前行的记录数据  复制代码 代码如下: $('#tt' ...

  9. 给Easyui　combobox设定默认值

          今天做到那个北理工二期的项目,里面刚好有几个dialog需要弄一个默认值,一般是选择启用与否,但是,为了方便用户,最好有一个默认值,所以,增加一个默认值的属性.代码入下: JS代码:   ...

  10. [OpenCV] Samples 12: laplace

    先模糊再laplace,也可以替换为sobel等. 变换效果后录成视频,挺好玩. #include "opencv2/videoio/videoio.hpp" #include & ...