Question

我尝试更改HTML表单，输入类型文件。这是我的代码：

HTML，表单id =表单

<input class="upload_file" type="file" id="file" name="file" />

.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，它们有不同的风格。不知道他们是怎么做到的。

Answer 1

你不能对输入类型文件做任何事情（除了巨大的黑客攻击）。我知道这听起来很糟糕，但网络标准仍未找到解决方案。

我建议的是，你使用了更灵活的东西，例如swfUpload，它可以让你改变立场，并在上传之前检查文件大小。

可以找到一些简洁的例子here

希望这有助于你

Answer 2

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

Answer 3

最好的黑客。输入文件HTML：

<input type="file" class="hide" id='inputFile' />
<a href="#" id="triggerFile" class="btn btn-primary">Browse File</a>

使用jQuery：

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

Answer 4

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

以下是如何使用其他按钮触发按钮的示例，但这只是众多方法中的一种： One button firing another buttons click event

Answer 5

您可以更改高度的字体大小或关注此网址http://www.quirksmode.org/dom/inputfile.html（这基本上就是我在项目中所做的工作）。

Answer 6

其实你可以！

您必须使用SI.Files库。

Here是一篇很好的文章，详细介绍了它的完成情况：

祝你好运！

Answer 7

Bhee，只需将CSS定义添加到html输入标记：

像：

<select style:"...whatYoureadBelow..."></select>

或

<input style:"...whatYoureadBelow..." />

CSS定义：

border:none;
background-image:url('somePathToImage');
background-repeat:no-repeat;
//those things below adjust according to your background image size
width:XXpx;
height:XXpx;

因此，您将获得在Facebook或其他地方获得的内容;）

我们可以改变<input type =“file”/>样式吗？

7 个答案: