__

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

所有随之而生的便是这样的一种修饰方式：[将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. Spring Batch（三） Job Launcher、ItemReader、ItemProcessor、ItemWriter各个实现类和用途

    内容来自<Spring Batch 批处理框架>,作者:刘相. 1.JobLauncher JobLauncher(作业调度器)是SpringBatch框架提供的运行Job的能力.用过给定 ...

  2. Java数组之二维数组

    Java中除了一维数组外,还有二维数组,三维数组等多维数组.本文以介绍二维数组来了解多维数组. 1.二维数组的基础 二维数组的定义:二维数组就是数组的数组,数组里的元素也是数组. 二维数组表示行列二维 ...

  3. Random Forest总结

    一.简介 RF = Bagging + Decision Tree 随机:数据采样随机,特征选择随机 森林:多个决策树并行放在一起 几个误区: 不是每棵树随机选择特征,而是每一个结点都随机选择固定数目 ...

  4. 迁移svn项目到git

    women用的gitlab 在gitlab新建项目,然后拉项目拉下来,然后你把项目(vue)全部选中,除开node_modeles  .svn  dist  .idea这些不选外,copy到这个拉下来 ...

  5. Kafka笔记7（构建数据管道）

    构建数据管道需要考虑的问题: 及时性  可靠性 高吞吐量和动态吞吐量   数据格式  转换    安全性   故障处理能力  耦合性与灵活性 数据管道的构建分为2个阵营,ETL和ELT ETL:提取- ...

  6. django--如何将数据结果集序列化传给前端页面展示

    示例为一对多的表关系,学生为多,老师为一,设置外键字段可以为空,也就是说关联的老师被删除该学生依然存在,只是相应字段留空 class Teacher(models.Model): name = mod ...

  7. Jmeter笔记（Ⅱ）使用Jmeter实现轻量级的接口自动化测试

    接口测试虽然作为版本的一环,但是也是有一套完整的体系,有接口的功能测试.性能测试.安全测试:同时,由于接口的特性,接口的自动化低成本高收益的,使用一些开源工具或一些轻量级的方法,在测试用例开发的成本不 ...

  8. js前后五年的时间日期万年历

    <script src='bootstrap/js/jquery-1.11.2.min.js'></script>//引入JQUERY文件<div> <sel ...

  9. 【数据结构】算法 LinkList (Reverse LinkedList) Java

    反转链表,该链表为单链表. head 节点指向的是头节点. 最简单的方法,就是建一个新链表,将原来链表的节点一个个找到,并且使用头插法插入新链表.时间复杂度也就是O(n),空间复杂度就需要定义2个节点 ...

  10. IT题库2-LinkList和ArrayList(插入数据、末尾插入数据、不同数据量插入数据)的效率？

    ArrayList和LinkedList是两个集合类,用于存储一系列的对象引用(references).ArrayList是List接口的一个实现类,它的特点是查询效率高,增删效率低,线程不安全,原因 ...