思路:
input file上传按钮的美化思路是,先把之前的按钮透明度opacity设置为0,然后,外层用div包裹,就实现了美化功能。
代码如下:
DOM结构:
<a href="javascript:;" class="a-upload"> <input type="file" name="" id="">点击这里上传文件 </a> <a href="javascript:;" class="file">选择文件 <input type="file" name="" id=""> </a>
CSS样式1:
/*a upload */ .a-upload { padding: 4px 10px; height: 20px; line-height: 20px; position: relative; cursor: pointer; color: #888; background: #fafafa; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; display: inline-block; *display: inline; *zoom: 1 } .a-upload input { position: absolute; font-size: 100px; right: 0; top: 0; opacity: 0; filter: alpha(opacity=0); cursor: pointer } .a-upload:hover { color: #444; background: #eee; border-color: #ccc; text-decoration: none }
样式2:
.file { position: relative; display: inline-block; background: #D0EEFF; border: 1px solid #99D3F5; border-radius: 4px; padding: 4px 12px; overflow: hidden; color: #1E88C7; text-decoration: none; text-indent: 0; line-height: 20px; } .file input { position: absolute; font-size: 100px; right: 0; top: 0; opacity: 0; } .file:hover { background: #AADFFD; border-color: #78C3F3; color: #004974; text-decoration: none; }
修改后如下:
样式二:
备注:对于HTML5之input:file,还可以控制上传的类型的,但是这个是html5的,低版本浏览器不支持,详情请看:HTML5的 input:file上传类型控制 http://www.haorooms.com/post/input_file_leixing
美化后显示文件名
上面美化,把默认显示的文件名也给隐藏掉了,那么如何显示文件名称呢?没关系,我们可以用jquery来获取文件的文件名。
我们可以写个change事件
$(".a-upload").on("change","input[type='file']",function(){ var filePath=$(this).val(); if(filePath.indexOf("jpg")!=-1 || filePath.indexOf("png")!=-1){ $(".fileerrorTip").html("").hide(); var arr=filePath.split('\\'); var fileName=arr[arr.length-1]; $(".showFileName").html(fileName); }else{ $(".showFileName").html(""); $(".fileerrorTip").html("您未上传文件,或者您上传文件类型有误!").show(); return false } })
其他input美化文章
关于 input checkbox和radio样式美化,我也写了一篇文章,请看 http://www.haorooms.com/post/css_mh_ck_radio
还有input search 右侧有个关闭按钮的美化,可以看http://www.haorooms.com/post/qd_ghfx 第五条。
相关推荐
主要介绍了css input[type=file] 样式美化(input上传文件样式 )的相关资料,需要的朋友可以参考下
当我们想要用css美化表单的时候,有两个控件就会和前段人员作对,一个是是大名鼎鼎的select,另一个就是我现在要说说的input type=file
上传控件input type='file' css 样式美化
如果要让浏览按钮更漂亮一点,我们想定义它的背景颜色,甚至想用...偶然看到一篇文章:input file 文件选择框美化 作者是把系统默认的按钮设置透明度为0,再定义一个label标签样式,来覆盖透明掉的按钮。支持IE6\IE7\FF
那么有一个超级简单的方法,就是先用一个div制作你要的上传按钮的样式,将实际的上传按钮input设置透明,并定位在设置样式的div上面。 例子: html部分: 点击上传 <input type="file" > css部分: <...
关于type=file的input是啥? 这个是啥我觉得没必要再说了,反正大家都知道,然后在现在有各种手机的时代,还可以通过直接拍照的方式来上传,反正比以前好玩多了。 并且以前是只能上传一个文件,现在的话,只要增加...
在日常重构中,form表单家族中的 upload field 在使用 css 美化时令人头疼!默认情况下,各个浏览器下的表现层次不齐,很是郁闷,于是本人搜集整理了一些常用技巧,需要了解的朋友可以参考下
文件上传input在各个浏览器里表现形式都不一样: ie6 ie7,8,9 ff chrome 这里介绍一种简单实用的,在各种浏览器下表现一致的美化方法,效果如下: ...ie6无法美化,只能应用...input type=”file” class=”file-
CSS自定义inputfile
- 把 `<input type="file"/>` 默认样式设置`display:none;`,即设为不可见 - 新建一个文本输入框`<input type="text"/>` 和 一个按钮 `<input type="button"/>` - 通过 JS 绑定事件,当点击按钮的时候,触发 ...
只修改input file组件的浏览按钮样式
input id=subsubfolder1 type=checkbox /> <li class=file>下级</a></li> <label for=subsubfolder2>下级 <input id=subsubfolder2 type=checkbox /> <li class=file>无限级</a></li> <li class=file>...
input type=file d=file_input @change=importf(this) accept=.csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel /> <div click=fileBtn>上传到服务器 <e
css: .file_box{ float: right; width: 1035px; border: 1px solid #999; height: 32px; line-height: 35px; padding-left: 10px; margin-right: 25px; } .file{ float: right; outline: none; border:none; ...
一款效果非常时尚的文件上传表单域美化特效,下面...input type=file name=file id=file class=inputfile /> <label for=file>Choose a file CSS样式 首先需要隐藏<input>元素。这里不能使用display: none
用css alpha 滤镜 实现input file 样式美化代码