<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. Docker镜像的获取和推送

    查找镜像 查找镜像的方法有主要有两种,一种是在Docker Hub官方网站查找,网址为https://hub.docker.com/ 另一种方法是在命令行界面中通过docker serach < ...

  2. NodeJS+Express开发web,为什么中文显示为乱码

    把你的文件另存为下,格式为utf-8的试下就行!

  3. net 反射30分钟速成

    概述 什么是反射 Reflection,中文翻译为反射.        这是.Net中获取运行时类型信息的方式,.Net的应用程序由几个部分:‘程序集(Assembly)’.‘模块(Module)’. ...

  4. git 问题解决办法

    1.撤销 add 添加:git rm -r --cached . (参考:https://www.cnblogs.com/wuchanming/p/5428897.html) 2.撤销 commit ...

  5. php面向对象精要(1)

    1.静态属性与方法 每一个类的实例拥有自己的属性和方法,每一个类也可以包含静态属性,静态属性不属于类的任何实例,可以把静态属性理解成存储在类中的全局变量,可以在任何地方通过类名引用静态属性. < ...

  6. POJ1458(KB12-L LCS)

    Common Subsequence Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 51319   Accepted: 21 ...

  7. CentOS 7环境下Pycharm安装流程记录

    1.准备安装文件: 方法1: 使用内置火狐浏览器访问下载最新格式为tar.gz的压缩包 网址:https://www.jetbrains.com/pycharm/download/previous.h ...

  8. PHP定界符<<<eof 使用

    PHP是一个Web编程语言,在编程过程中难免会遇到用echo来输出大段的html和javascript脚本的情况,如果用传统的输出方法 ——按字符串输出的话,肯定要有大量的转义符来对字符串中的引号等特 ...

  9. [TJOI2015]弦论

    我们先求出该字符串的\(SA\)和\(Ht\) 然后分类讨论 \(T=0\)时,每次去掉\(Ht\)往后扫就行 \(T=1\)时,我们考虑\(lcp\)对答案的影响 既然用到\(lcp\),那就要用\ ...

  10. vue Element-UI 分页使用(1)

    最近在使用Element-UI这套框架配合Vue来写前端页面.在用Element-UI来制作表格的时候,遇到了一些小问题,记录方便学习. 其中两个事件是关于切换当前页和切换显示的列表条数的.另外的属性 ...