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