当前位置:  开发笔记 > 编程语言 > 正文

我们可以改变<input type ="file">样式吗?

如何解决《我们可以改变<inputtype="file">样式吗?》经验,为你挑选了4个好方法。

我试图更改HTML表单,输入类型文件.这是我的代码:

HTML,表单id =表单


.CSS

I tried both:
.upload_button{
  background: url('../images/upload_btn_bg.png') no-repeat;
  width: 200px; 
  height: 40px;
}

#form input[type=file]{
  background: url('../images/upload_btn_bg.png') no-repeat;
  width: 200px; 
  height: 40px;
}

这两种方法都不起作用.我确实从一些网站上看到,比如facebook,youtube,google或twitter,它们有不同的风格.不知道他们是怎么做到的.



1> Marcos Placo..:

你不能对输入类型文件做任何事情(除了巨大的黑客攻击).我知道这听起来很糟糕,但网络标准仍然没有找到解决方案.

我建议的是,你使用了一些更灵活的东西,比如swfUpload,它可以让你改变窗台,并在上传之前检查文件大小.

在这里可以找到一些巧妙的例子

希望这对你有所帮助


没关系.我们都这样做了:-)
http://markusslima.github.io/bootstrap-filestyle/

2> Gopher..:

例如,尝试此变体http://www.quirksmode.org/dom/inputfile.html



3> Donald Derek..:

最好的黑客.输入文件HTML:


Browse File

使用jQuery:

$('#triggerFile').on('click', function(e){
        e.preventDefault()
        $("#inputFile").trigger('click')
    });



4> 小智..:

你为什么不把css显示为:none然后用另一个按钮触发这个按钮?这可以通过javascript轻松完成,然后您可以完全自己设置按钮的样式

这是一个如何用另一个按钮触发按钮的示例,但这只是众多方法中的一种: 一个按钮触发另一个按钮单击事件

推荐阅读
落单鸟人
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有