<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. 树莓派安装.net core 2.1

    0.更新源 sudo apt-get update 1.安装依赖 sudo apt-get install curl libunwind8 gettext 2.下载 SDK 或者 RunTime ht ...

  2. C#基础知识回顾--C#遍历enum类型、获取enum项个数

    C#遍历enum类型 对于enum类型: 使用foreach遍历enum类型的元素并填充combox foreach ( HatchStyle hs1 in Enum.GetValues(typeof ...

  3. Redis列表操作

    列表类似于双向链表结构,可从序列两端推入或者弹出元素. (列表常用命令) RPUSH : RPUSH key-name value  [value1 value2,...] ------------将 ...

  4. webpack打包优化并开启gzip

    应用场景:项目使用webpack2.x进行打包,打包后静态资源通过nginx转发配置: 问题:webpack打包后的资源文件特别,特别大,没打包之前页面一个页面js有2M左右(其中已经抽离了css)? ...

  5. C# 利用反射将枚举绑定到下拉框

    前言:反射(Reflection)是.NET提供给开发者的一个强大工具,尽管作为.NET框架的使用者,很多时候不会用到反射.但在一些情况下,尤其是在开发一些基础框架或公共类库时,使用反射会使系统架构更 ...

  6. thinkphp ajax删除 隐藏与显示

    知识点: 1.ajax删除: 2.一个同步实现三个异步的效果. html 部分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...

  7. Linux常用基本命令[cp]

    cp:复制文件或者目录 用法格式: cp [option] [source] [dest] cp [选项] [源文件] [目标文件] >用root账户,创建文件,复制文件 root@dev:/h ...

  8. python学习之老男孩python全栈第九期_day009知识点总结

    '''# len# 计算字符串的长度# s = '金老板小护士'# len(s)# 不能用 len 怎么办#low一点的方法# count = 0# for i in s:# count += 1# ...

  9. jquery中 苹果手机对on触发的点击事件无效果

    在被点击的元素上加上样式  cursor:pointer;  苹果手机就可以触发事件了

  10. idea配置热部署

    第一步:添加依赖使用spring-boot-devtools提供的开发者工具spring-boot项目中引入如下依赖 <dependency><groupId>org.spri ...