<input type='file'>的默认外观实在难看,绝大多数情况都需要对其美化。找了很多资料,目前发现以下方式是最简单的美化方式。

1.将file input用label包裹起来,然后给这个label增加我们想要的样式。

2.给input增加样式:

style="left:-9999px;position:absolute;"

3.label内增加显示文本

<span>上传文件</span>

完整代码:(点击查看demo)

<label class="upload_btn" for="file">
<input type="file" id="file" name="" style="left:-9999px;position:absolute;">
<span>上传文件</span>
</label>

这是label标签特性,可将事件传递到目标标签,如不加for属性,默认传递到第一个标签。

input file 美化的更多相关文章

  1. input file 美化的方法

    css input[type=file] 样式美化,input上传按钮美化 2014年8月29日 113210次浏览 由于明天公司组织出去游玩,今天把这两天的博客都写了吧,今天的内容是input[ty ...

  2. input file美化,文件上传

    此文学习至:http://www.haorooms.com/post/input_file_leixing 然而只会用,不会做,UI泪茫茫 效果图: 原图: 美化后: 此主要用css美化表单,然后用J ...

  3. input file美化

    <style> a{display:inline-block; width:100px; height:40px; position:relative; overflow:hidden;} ...

  4. Input file 文本框美化

    HTML原生的input file 上传按钮有多(无)不(力)漂(吐)亮(槽)我就不多说了.大家几乎在项目中都会有遇到图片.等文件需要上传的地方,好看的文件上传按钮会使人身心愉悦(我瞎说的).好了不多 ...

  5. 伪触发 input file 的click事件

    前端在做 input file 美化的时候,通常 把 input 定位position 到 已美化的按钮最上方 opacity: 0 HTML5时代,已有更方便的方法,点击美化按钮直接触发选择文件事件 ...

  6. ie浏览器下HTML上传控件input=file的美化

    近期写东西用到了input=file这个按钮,给其添加背景,在其它浏览器上都可以正常的显示,可一到ie上便不听话了,完全没有添加上,显的很难看.今天在网上找到一方法,试过后感觉很好,终于把这个问题给解 ...

  7. input file 文件上传标签的样式美化

    input file 文件上传标签的样式美化 将<input type="file">的透明度设置为0: <input type="file" ...

  8. input file样式美化

    默认样式: <input type="file" /> 美化样式时: 将其设置为透明,设置宽高覆盖到需要用的地方,宽100%,高100% 可以用到定位 .box{ po ...

  9. ajax+ashx 完美实现input file上传文件

    1.input file 样式不能满足需求 <input type="file" value="浏览" /> IE8效果图:    Firefox效 ...

随机推荐

  1. 理解nodejs的module模块儿

    module 在 Node.js 模块系统中,每个文件都视为独立的模块,node在运行某个模块儿时会生成一个module对象 Module { id: '.', exports: 2, parent: ...

  2. Webhook是什么、怎么理解

    Webhook是什么 我们想看看维基老大的解说: A webhook in web development is a method of augmenting or altering the beha ...

  3. [C#]记一次解析XML转对象的笔记

    项目中调用第三方API,返回格式是XML字符串,需要将XML反序列化为对象,格式如下: <?xml version="1.0"?> <Response xmlns ...

  4. AngularJS学习笔记(三)数据双向绑定

    双向绑定 双向绑定是AngularJS最实用的功能,它节省了大量的代码,使我们专注于数据和视图,不用浪费大量的代码在Dom监听.数据同步上,关于双向更新,可看下图: 下面,我们通过代码来实现.先不要纠 ...

  5. Docker 为 ASP.NET Core Web 应用程序生成 Docker 映像,创建并运行多个容器

    1.为 ASP.NET Core 应用程序生成 Docker 映像 下载这个事例项目:https://github.com/dotnet/dotnet-docker/tree/master/sampl ...

  6. .net 多线程的使用(Thread)

    上篇 net 同步异步 中篇 多线程的使用(Thread) 下篇 net 任务工厂实现异步多线程 Thread多线程概述 上一篇我们介绍了net 的同步与异步,我们异步演示的时候使用的是委托多线程来实 ...

  7. 使用 ActiveMQ 实现JMS 异步调用

    目录 简介 启动 ActiveMQ 服务器 查看控制台 ActiveMQ 的消息通道 Queue Topic 比较 开发生产者和消费者 开发服务端(消费者) 开发客户端(生产者) 参考 简介 服务之间 ...

  8. Oracle中UNION和ORDER BY共用方法

    问题 SQL语句中,UNION拼接两个单独的SQL时候,单独的SQL中加入ORDER BY会报错,ORDER BY只能放在句末. // 会报错的语句 SELECT S.S_ID AS ID,S.S_N ...

  9. POJ1284(SummerTrainingDay04-K 原根)

    Primitive Roots Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 4505   Accepted: 2652 D ...

  10. Unix环境高级编程:守护进程

    参考 Unix环境高级编程,第9,13章 介绍 守护进程就是Linux中使用ps aux那些一般以d结尾的程序,比如rsyslogd,sshd等,为daemon简称.他们是长期在后台执行的随终端关闭而 ...