最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
纯css美化file文件上传控件方法
时间:2014-09-13 编辑:简简单单 来源:一聚教程网
在项目开发过程中可能经常也会遇到file控件,但是这个控件比较另类,能够修改的属性不多,而且样式外观各个浏览器的表现也不一样。通常都是不建议模拟的,有时候产品很执着说为了统一风格还是希望要去模拟下,好吧,出发点都是好的,能做就做吧。也没想象的那么困难,只是觉得没太大的必要。
看到很多群里面有很多人问起过,很多人的解决方案都不怎么简洁,还用Js来控制了,很麻烦的说。后来我就想了下用把file空间透明度调到0的假象来达到模拟的效果,做发就是file控件用一个div包起来,然后这个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; } |
-
上一个: css中cursor自定义鼠标形状
-
下一个: CSS提高渲染性能实现方法
相关文章
- CSS 鼠标点击拖拽效果代码展示 10-31
- CSS使用SVG实现动态分布的圆环发散路径动画教程 10-31
- css3中仿放大镜效果的几种方式原理介绍 10-26
- CSS3切割轮播图的代码展示 10-26
- CSS组合选择器解析 10-26
- css带搜索导航栏的代码展示 10-26