__

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

所有随之而生的便是这样的一种修饰方式：[将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. IDEA使用技巧

    1,导入原Eclipse Web项目 由于使用 PowerDesign连接MySql时只能用32位 Jdk,原Eclipse项目依赖于64位Jdk,导致在eclipse打不开工程,把工程导入IDEA后 ...

  2. windows slaver 脚本执行xcopy 报错无效驱动器规格

    jenkins上配置的windows slaver机器如下: 我用这台windows 机器作为slaver机器来编译pc的exe包,但是在最后归档包倒ftp上时报错,如下: 但是我直接在windows ...

  3. 2018-2019 20175232 实验二《Java面向对象程序设计》实验报告

    一.实验内容及步骤 1熟练掌握Junit和TDD: TDD(Test Driven Devlopment, 测试驱动开发)我们是该“先写产品代码,然后再写测试代码,通过测试发现了一些Bugs,修改代码 ...

  4. python虚拟环境迁移

    python虚拟环境迁移: 注意事项:直接将虚拟环境复制到另一台机器,直接执行是会有问题的. 那么可以采用以下办法: 思路:将机器1虚拟环境下的包信息打包,之后到机器2上进行安装: (有两种情况要考虑 ...

  5. vector创建二位数组

    默认初始化vector vector<vevtor<int> > arr(row, vector<int>(col, 0)); //指定行大小为row,列为col, ...

  6. 201905<<金字塔原理>>

    金字塔原理是本好书,主要从写作,思考,解决问题三个方面讲解了如何使用金字塔结构来分析.自下而上的分析,自上而下的表达,解决问题时先确定问题的四要素,搭建三棱镜框架,再解决问题.三棱镜分析问题的方法感触 ...

  7. Nginx 配置文件优化

    user www www; #用户&组 worker_processes auto; #通常是CPU核的数量存储数据的硬盘数量及负载模式,不确定时将其设置为可用的CPU内核数(设置为“auto ...

  8. IT题库6-同步和异步

    同步就是许多线程同时共用一个资源,一个线程在用别的线程就要等待.异步相反,可以不用等待. 同步:发送一个请求,等待返回,然后才能再发送下一个请求:异步:发送一个请求,不等待返回,随时可以再发送下一个请 ...

  9. insert into TABLE by SELECT ...

    insert into isp_rmi3 ( select r.id, r.blue_id, r.sell_channel,NULL, r.interface_id, NULL, NULL, r.ur ...

  10. LoadXml 加载XML时，报错：“根级别上的数据无效。 行1，位置1“

    ==XML=================================== <?xml version="1.0" encoding="utf-8" ...