多语言展示
当前在线:709今日阅读:99今日分享:20

自定义input type=“file”样式

input type=“file”是一个网页上选择本地文件的按钮,但是由于不同浏览器的差异,这个按钮的样式也会不同。在实际开发当中,我们经常都需要用其他图片或者按钮来代替这个按钮。下面我们来看看怎样操作。
工具/原料
1

电脑

2

网页编辑器

3

浏览器

方法/步骤
1

编写基本的HTML代码,例如:

2

编写input的CSS代码:.mystyle {width: 250px;height: 250px;position: relative;cursor: pointer;outline: medium none;filter: alpha(opacity=0);-moz-opacity: 0;opacity: 0;top: -80%;left: 10px;}

3

在浏览器上运行代码,根据实际情况来调整CSS中的长宽和上下左右距离等。实现原理,利用CSS中透明的属性,把input type=“file”隐藏了,然后把它放到您自定义的图片或按钮的位置上。

推荐信息