纯css美化file文件上传控件方法

2016-03-02    编辑:swteen     点击(
html中的file控件是非常的难看得,下文来帮助各位利用纯css美化file文件上传控件了,有兴趣的朋友可进入参考。

在项目开发过程中可能经常也会遇到file控件,但是这个控件比较另类,能够修改的属性不多,而且样式外观各个浏览器的表现也不一样。通常都是不建议模拟的,有时候产品很执着说为了统一风格还是希望要去模拟下,好吧,出发点都是好的,能做就做吧。也没想象的那么困难,只是觉得没太大的必要。
看到很多群里面有很多人问起过,很多人的解决方案都不怎么简洁,还用Js来控制了,很麻烦的说。后来我就想了下用把file空间透明度调到0的假象来达到模拟的效果,做发就是file控件用一个div包起来,然后这个div设置背景,背景就是所需要模拟的那个背景按钮。

下面你看下效果吧,也是我最近做的一个内部系统的一个案例:

纯css美化file文件上传控件方法

 

 代码如下 复制代码
<div class="file_box">
   <input type="file" class="input-file">
</div>
.input-file, .file_box {
   display: block;
   margin: 5px auto;
   width: 60px;
}
.input-file {
   cursor: pointer;
   opacity: 0;
}
.file_box {
   background: url("img/slice/file_btn.png") no-repeat ;
   cursor: pointer;
   height: 26px;
   position: relative;
}