input file 美化
<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 美化的更多相关文章
- input file 美化的方法
css input[type=file] 样式美化,input上传按钮美化 2014年8月29日 113210次浏览 由于明天公司组织出去游玩,今天把这两天的博客都写了吧,今天的内容是input[ty ...
- input file美化,文件上传
此文学习至:http://www.haorooms.com/post/input_file_leixing 然而只会用,不会做,UI泪茫茫 效果图: 原图: 美化后: 此主要用css美化表单,然后用J ...
- input file美化
<style> a{display:inline-block; width:100px; height:40px; position:relative; overflow:hidden;} ...
- Input file 文本框美化
HTML原生的input file 上传按钮有多(无)不(力)漂(吐)亮(槽)我就不多说了.大家几乎在项目中都会有遇到图片.等文件需要上传的地方,好看的文件上传按钮会使人身心愉悦(我瞎说的).好了不多 ...
- 伪触发 input file 的click事件
前端在做 input file 美化的时候,通常 把 input 定位position 到 已美化的按钮最上方 opacity: 0 HTML5时代,已有更方便的方法,点击美化按钮直接触发选择文件事件 ...
- ie浏览器下HTML上传控件input=file的美化
近期写东西用到了input=file这个按钮,给其添加背景,在其它浏览器上都可以正常的显示,可一到ie上便不听话了,完全没有添加上,显的很难看.今天在网上找到一方法,试过后感觉很好,终于把这个问题给解 ...
- input file 文件上传标签的样式美化
input file 文件上传标签的样式美化 将<input type="file">的透明度设置为0: <input type="file" ...
- input file样式美化
默认样式: <input type="file" /> 美化样式时: 将其设置为透明,设置宽高覆盖到需要用的地方,宽100%,高100% 可以用到定位 .box{ po ...
- ajax+ashx 完美实现input file上传文件
1.input file 样式不能满足需求 <input type="file" value="浏览" /> IE8效果图: Firefox效 ...
随机推荐
- C#基础知识回顾:2.使用DbProviderFactory实现多数据库访问
ADO.Net 2.0中,在System.Data.Common中引入了一系列抽象基类,使得开发人员能够在不依赖具体数据库操作的情况下进行编写数据访问代码,它们分别是DbConnection.DbCo ...
- Go语言封装Http协议GET和POST请求
本文几乎没有文字叙述: /* 有关Http协议GET和POST请求的封装 */ package net import ( "net/http" "io" &qu ...
- PhpStorm快捷方式
转载源:http://www.cr173.com/html/66775_1.html PhpStorm 是 JetBrains 公司开发的一款商业的 PHP 集成开发工具,PhpStorm可随时帮助用 ...
- [css3] 看博客学习别人的旋转的星球
定义一个div 太阳轨道sunline,边框显示出来,定义position为relative #sunline{ width: 500px; height: 500px; border:2px sol ...
- Chromium源码--网络请求流程分析
转载请注明出处:http://www.cnblogs.com/fangkm/p/3784660.html 本文探讨一下chromium中加载URL的流程,具体来说是从地址栏输入URL地址到通过URLR ...
- git 同步非master分支
在本地创建和远程分支对应的分支,使用git checkout -b branch-name origin/branch-name,本地和远程分支的名称最好一致: 建立本地分支和远程分支的关联,使用gi ...
- JavaScript--事件入门(24)
// JavaScript事件是由访问Web页面的用户引起的一系列操作; // 例如:用户点击;当用户执行某些操作的时候,再去执行一系列代码; 一 事件介绍 // 事件一般是用于浏览器和用户操作进行交 ...
- 初学HTML-3
标题标签:<h#>...</h#>,从h1到h6,字号由大变小. 段落标签:<p>...</p>,在浏览器中独占一行. 空格:" " ...
- python 约束,异常处理与MD5加密
1. 类的约束 1. 写一个父类. 父类中的某个方法要抛出一个异常 NotImplementedError (重点) 2. 抽象类和抽象方法 # 语法 # from abc import ABCMet ...
- 排序算法(5)--Selection Sorting--选择排序[2]--Heap Sort--堆排序
1.基本思想 具有n个元素的序列 (h1,h2,...,hn),当且仅当满足(hi>=h2i,hi>=2i+1)或(hi<=h2i,hi<=2i+1) (i=1,2,...,n ...