利用CSS和JS实现文件选择框的美化(input,file)
by 毛三胖 on 2018年03月05日
阅:362赞:5

引言

在做文件上传时,都会用到文件选择框 <input type=file>。而文件选择框的样式真的是太丑了,而且不同的浏览器差异还很大。出于安全的考虑,不能直接的应用样式在文件框上。如果不做处理,文件输入框和设计页面实在是格格不入。我们只能通过变通的CSS方式并结合JS来实现美化,本文收录了一个效果以备使用。

效果

说明

基本的实现思路是利用绝对定位将文件输入框叠放在<label>之上,并将文件输入框设成不可见(opacity: 0)。让用户只能看到 <label>。通过设置label的样式和效果,来达到美化文件输入框的目的。

如果对实现还用疑问,可在演示代码中调整透明度数值加深理解。

背景知识

position: relative

该指令生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

position: relative

该指令生成相对定位的元素,相对于其正常位置进行定位。因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

阅读

更多CSS定位方面的内容请移步至MDN:

MDN > CSS > position

$ 热门标签
$ 贴士
简单是稳定的前提。 -Edsger Dijkstra
$ 声明
本站所有代码及文字都是作者精心汇编整理而成,转载代码及文字请明确注明出处和作者名称。