<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微信公众号开发

    概览 key value 项目名称 node微信公众号开发 项目描述 使用node编写接口,前后端分离获取签名数据 开发者 leinov 发布日期 2018-11-07 仓库 github地址 安装& ...

  2. [转]DevOps解决方案-腾讯云

    本文转自:https://cloud.tencent.com/solution/devops 什么是 DevOps?   DevOps 集文化理念.实践和工具于一身,可以提高企业高速交付应用程序和服务 ...

  3. CentOS7 mini安装后没有ifconfig命令的解决办法

    在CentOS 最小化mini安装后,没有ifconfig命令,此时网卡也没有启动,所以无法yum安装net-tools. 下面三步解决此问题: 1 查看网卡名称 ip addr 2 启动网卡 ifu ...

  4. 素数回文(hdu1431)

    素数回文 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...

  5. Hanoi问题 算法

    问题描述:假设有3个分别命名为A.B.C的塔座,在塔座A上插有n个直径大小各不同,一小到大标号为1,2,….,n的圆盘,要求将塔座A上的n个圆盘移动到C盘上,并且仍按原来的顺序叠排. 同时遵循下列规则 ...

  6. Java 初/中级面试题及答案【详细】

    1.Java的HashMap是如何工作的? HashMap是一个针对数据结构的键值,每个键都会有相应的值,关键是识别这样的值. HashMap 基于 hashing 原理,我们通过 put ()和 g ...

  7. php命令行生成与读取配置文件

    接着之前的文章:php根据命令行参数生成配置文件 ghostinit.php <?php class ghostinit{ static $v = 'ghost version is 1.1'; ...

  8. HDU4417(SummerTrainingDay08-N 主席树)

    Super Mario Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  9. element-ui Tag、Dialog组件源码分析整理笔记(五)

    Tag 标签组件 <script> export default { name: 'ElTag', props: { text: String, closable: Boolean, // ...

  10. ArcGIS Server + ArcGIS Portal 10.5

    1.安装IE11 2. 域名需要在C:\Windows\System32\drivers\etc\host文件中添加 127.0.0.1  机器名.域名 win2008.smartmap.com 19 ...