__

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

所有随之而生的便是这样的一种修饰方式：[将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. setup FTP server on CentOS 7

    Setup FTP Server on CentOS 7 Install vsftpd vsftpd (Very Secure File Transport Protocol Daemon) is a ...

  2. C++实验三

    part2 graph.h #ifndef GRAPH_H#define GRAPH_H// 类Graph的声明 class Graph { public: Graph(char ch, int n) ...

  3. 用微信小程序连接leancloud数据库注意事项~

    具体步骤转载如下: 官网教程 大佬提示 注意事项: 1.下载的av-weapp-min.js,需要放在当前项目名称的子目录pages下 2.如上述教程,需要注册leancloud和AppID,并写在a ...

  4. locust压测websocket协议

    Locust是以HTTP为主要目标构建的. 但是,通过编写触发器request_success和 request_failure事件的自定义客户端,可以轻松扩展到任何基于请求/响应的系统的负载测试 . ...

  5. python运算符和数据类型的可变性

    一.运算符 计算机可以进行的运算有很多种,不只是加减乘除,它和我们人脑一样,也可以做很多运算. 种类:算术运算,比较运算,逻辑运算,赋值运算,成员运算,身份运算,位运算,今天我们先了解前四个. 算术运 ...

  6. day16 python之匿名函数,递归函数

    匿名函数 匿名函数格式 函数名 = lambda 参数 :返回值 #参数可以有多个,用逗号隔开 #匿名函数不管逻辑多复杂,只能写一行,且逻辑执行结束后的内容就是返回值 #返回值和正常的函数一样可以是任 ...

  7. 教你如何修改运行中的docker容器的端口映射

    在docker run创建并运行容器的时候,可以通过-p指定端口映射规则.但是,我们经常会遇到刚开始忘记设置端口映射或者设置错了需要修改.当docker start运行容器后并没有提供一个-p选项或设 ...

  8. 2017.12.7 URAT 串口通信

    波特率就是发送二进制数据位的速率, 习惯上用 baud 表示, 即我们发送一位二进制数据的持续时间=1/baud. 在通信之前, 单片机 1 和单片机 2 首先都要明确的约定好它们之间的通信波特率, ...

  9. Appium(一)---环境搭建的一些问题

    最近开始学习Appium,一款很不错的自动化测试工具,网上已经有大量的环境搭建教程,我就不再细说,我搭建环境时主要参考如下两个博客https://www.cnblogs.com/yoyoketang/ ...

  10. Spring boot 配置https 实现java通过https接口访问

    近来公司需要搭建一个https的服务器来调试接口(服务器用的spring boot框架),刚开始接触就是一顿百度,最后发现互联网认可的https安全链接的证书需要去CA认证机构申请,由于是调试阶段就采 ...