当前位置：首页 > 资讯 > 技术文档

css美化input file按钮的代码方法

时间：2022-05-04 08:59 编辑：来源：阅读：
扫一扫，手机访问

摘要：css美化input file按钮的代码方法

input file在系统默认下的外观：
[img]http://files.jb51.net/upload/20081118132649198.jpg[/img] 我们最多通过定义input的border来改变系统默认的外观：
[img]http://files.jb51.net/upload/20081118132650476.jpg[/img] 如果要让浏览按钮更漂亮一点，我们想定义它的背景颜色，甚至想用背景图片来代替，通过css定义input flie还真是办不到的。偶然看到一篇文章：input file 文件选择框美化作者是把系统默认的按钮设置透明度为0，再定义一个label标签样式，来覆盖透明掉的按钮。
按照作者的方法，我也试验了一下，代码如下：

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

效果:
[img]http://files.jb51.net/upload/20081118132653811.jpg[/img] 虽然多了很多标签，但这种偷梁换柱的做法还是值得研究。有没有更好、更科学的作法还有待发掘。

全部评论(0)

上一篇：模拟QQ心情图片上传预览示例
下一篇：jQuery判断多个input file 都不能为空的例子

资讯排行榜
更多>>