<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. [转]oracle in 多个字段

    本文转自:https://www.cnblogs.com/Springmoon-venn/p/7016409.html oracle 使用in的时候使用多个字段 这个也是刚需啊. 最近有个需求,在一堆 ...

  2. 启用sa账号

    第一部分: 如果在安装的时候选中的是Window身份验证,后来需要SQLServer身份验证登录,那么 一.先用window账号登录数据库 二.启用window身份验证和sql sever身份验证方式 ...

  3. 使用Amazon AWS SNS 发送 SMS 消息 .net

    1.浏览aws 开发人员指南 https://docs.aws.amazon.com/zh_cn/sns/latest/dg/sms_publish-to-phone.html 2.安装 aws sm ...

  4. 记一次webapi传参数的问题

    .net小白一枚,经过了几个小时的研究,由于错误的写法导致后台始终接受不到前台传递过来的参数.首先看看控制器的参数 public Core.MVC.ServiceResult<DTO.Out.M ...

  5. 【linux】suse linux 常用命令

    命令ls——列出文件 ls -la 给出当前目录下所有文件的一个长列表,包括以句点开头的“隐藏”文件 ls a* 列出当前目录下以字母a开头的所有文件 ls -l *.doc 给出当前目录下以.doc ...

  6. Math Magic(完全背包)

    Math Magic Time Limit:3000MS     Memory Limit:32768KB     64bit IO Format:%lld & %llu Submit Sta ...

  7. c# 连等的写法都做了什么?

    在工作中遇到这样一个问题,批量对变量赋值相同的值时,如下: a = ; b = ; c = ; d = ; 我想这样写: a= b = c = d = ; 分别对应IL: Dup 复制计算堆栈上当前最 ...

  8. 漫画 | Java多线程与并发(一)

    1.什么是线程? 2.线程和进程有什么区别? 3.如何在Java中实现线程? 4.Java关键字volatile与synchronized作用与区别? volatile修饰的变量不保留拷贝,直接访问主 ...

  9. 存储过程TYPE类型参数调试

    当我们写完一段存储过程后,必然需要调试运行一下写的代码是否能成功运行,当参数是字符,数字或日期时,可以直接在测试窗口输入值.但是类型如果是定义好的TYPE,就无法简单的输入. 一.自定义TYPE TY ...

  10. onkeyup小练习

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...