__

一般的选择框在美化过程中会出现各种问题,样式出错，文字无法更改等...

所有随之而生的便是这样的一种修饰方式：[将type=file的input与另一个按钮通过js绑定，这样便可以通过改变另一个按钮的样式来达到美化的效果了。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

        <style>

           .dif{

                 height:40px;background:#f5f8fa;border:none;border-radius:30px;

                }

        </style>

</head>

<body>

<input type="file"style="display:none" >

<button class="dif" onclick="F_Open_dialog()">上传文件</button>

</body>

<script type="text/javascript">

    function F_Open_dialog() {

        document.getElementById("btn_file").click();

    }

</script>

</html>

input[type=file]的美化的更多相关文章

  1. css input[type=file] 样式美化，input上传按钮美化

    css input[type=file] 样式美化,input上传按钮美化 参考:http://www.haorooms.com/post/css_input_uploadmh

  2. input[type='file']样式美化及实现图片预览

    前言 上传图片是常见的需求,多使用input标签.本文主要介绍 input标签的样式美化 和 实现图片预览. 用到的知识点有: 1.input标签的使用 2.filelist对象 和 file对象 3 ...

  3. 文件上传input type="file"样式美化

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

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

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

  5. input[type=file] 样式美化，input上传按钮美化

    <style>.file { position: relative; display: inline-block; background: #D0EEFF; border: 1px sol ...

  6. input type=file美化

    最近碰到input type=file 之前用模拟点击来实现美化,发现在IE7下会有bug导致图片上传不上去,最后改用直接美化的方法 <!DOCTYPE html> <html la ...

  7. input type=file 上传文件样式美化（转载）

    input type=file 上传文件样式美化 来源:https://www.jianshu.com/p/6390595e5a36 在做input文本上传时,由于html原生的上传按钮比较丑,需要对 ...

  8. html input[type=file] css样式美化【转藏】

    相信做前端的都知道了,input[type=file]和其他输入标签不一样,它的事件必须是在触发自身元素上,而不能是其他元素.所以不能简单的把input隐藏,放个button上去. <a hre ...

  9. 【原创】js中input type=file的一些问题

    1.介绍 在开发中,文件上传必不可少,input[type=file] 是常用的上传标签,但是它长得又丑.浏览的字样不能换,但是他长得到底有多丑呢.我们来看看在不同浏览器里的样子吧. <inpu ...

随机推荐

  1. SSMP一次请求数据处理过程分析

    控制器代码 @RequestMapping("/changeUserPwd") public TranMessage changeUserPwd(String oriPwd, St ...

  2. java实验一总结

    实验一第一部分 在Linux中运行结果 通过cd和mkdir命令建立tree,带包编译并用 javac -d bin 的命令将编译文件保存在bin目录中 通过 java -cp 的命令运行带包的程序 ...

  3. .Net Core部署IIS

    1.环境安装 https://dotnet.microsoft.com/download/dotnet-core 下载Runtime & Hosting Bundle包安装,iis模块会出现支 ...

  4. Hadoop多租户架构配置

    cloudera manager 进到cluster里面,点击Dynamic Resource Pools,没做任何配置默认情况下,资源池里有个default资源组 hadoop jar /usr/l ...

  5. 通过js或jq增加的代码，点击事件或其他一些事件不起作用时

    通过js或jq增加的代码,点击事件或其他一些事件不起作用时,可使用 $(document).on("click",".noshow",function() { ...

  6. 【论文速读】Sheng Zhang_AAAI2018_Feature Enhancement Network_A Refined Scene Text Detector

    Sheng Zhang_AAAI2018_Feature Enhancement Network_A Refined Scene Text Detector 作者 关键词 文字检测.水平文字.Fast ...

  7. Install rapyuta client on Raspberry Pi

    Install rapyuta on client sudo git clone -b master https://github.com/cnsdytzy/-Rapyuta-installation ...

  8. 一个spinner控件使用的实例

    布局文件 <?xml version="1.0" encoding="utf-8"?><android.support.constraint. ...

  9. [COCI11-12 #4]删数游戏(贪心+数据结构)

    题目描述 题目描述 给出一个N位数字串,删除任意K位,使剩下的数最大.. 输入 第1行:2个整数N和K(1<=K<=N<=500000) 第2行:N个数字(可能为0) 输出 第1行: ...

  10. 基于PLC1850平台的ARP包请求与响应

    一.以太网ARP报文格式 ①.以太网目的地址:占6个字节(接收方的MAC地址,不清楚时发广播地址:FF-FF-FF-FF-FF-FF) ②.以太网源地址:占6个字节(发送方的MAC地址) ③.帧类型: ...