__

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

所有随之而生的便是这样的一种修饰方式：[将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. 程序设计与算法（一）C语言程序设计CAP之字符串

    C++中的字符串 字符串有三种形式 用双引号括起来的字符串常量,如果"CHINA"."C++ program" 存放于字符串数组中,以'\0'字符(ASCII吗 ...

  2. redis----------linux和mac如何安装redis和启动，关闭

    1.打开官网https://redis.io/download.官网有安装命令 2.以下是我的执行过程截图 执行完官网给的命令以后,再执行  make PREFIX=/usr/local/redis ...

  3. Error:java: Annotation processing is not supported for module cycles. Please ensure that all modules from cycle [web_dao,web_service] are excluded from annotation processing

    早上学习maven环境搭建时遇到的这个问题 下面这个错误的大概意思是:模块之间的互相依赖 Error:java: Annotation processing is not supported for ...

  4. MyEclipse的JPA实现集成EasyJF+Spring

    该视频是演示MyEclipse的JPA实现集成EasyJF+Spring的示例视频.演示项目很小,仅实现基本的查询功能. 演示过程中难免有误,请各位朋友热心指导! gh发给梵蒂冈地方fgh

  5. Linux内核开发进阶书籍推荐(不适合初学者)

    Linux内核开发进阶书籍推荐(不适合初学者) 很早之前就想写一篇文章总结一下Linux Kernel开发的相关资料,项目的原因,再加上家里的一些事情,一直没能找到闲暇,今天终于有些时间,希望可以完成 ...

  6. 百度站内搜索https不可用切换api搜索，加上谷歌api站内搜索

    google推https几年了,百度开始宣传全面https,但是,百度站内搜索 自己的服务却不走https,接口报错.百度分享也是. 然后采用http://search.zhoulujun.cn/cs ...

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

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

  8. SpringCloud入门之应用程序上下文服务（Spring Cloud Context）详解

    构建分布式系统非常复杂且容易出错.Spring Cloud为最常见的分布式系统模式提供了简单易用的编程模型,帮助开发人员构建弹性,可靠和协调的应用程序.Spring Cloud构建于Spring Bo ...

  9. 认识.net

    .NET多指NET Framework,Visual Studio.NET及其开发的应用程序.NET Framework是一个开发和执行环境,允许不同的程序语言和库无缝结合基于Window的应用程序. ...

  10. SNMP理解

    前两天项目要求一个附加功能,远程监视服务器的运行状况,要定期监视指定端口,指定业务,还包括服务器的磁盘空间,内存,CPU使用率等等.这头俩事还好说,ping和telnet也就搞定了,实在不行就开个so ...