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

Posted

技术标签:

【中文标题】我们可以改变 <input type="file"> 样式吗? [复制]【英文标题】:Can we change <input type="file"> style? [duplicate] 【发布时间】:2011-02-19 00:15:04 【问题描述】:

我尝试更改 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,它们有不同的风格。想知道他们是怎么做到的。

【问题讨论】:

【参考方案1】:

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

【讨论】:

【参考方案2】:

你不能对输入类型文件做任何事情(除了巨大的黑客)。我知道这听起来很可怕,但网络标准仍然没有提出解决方案。

不过,我建议您使用更灵活的方法,例如 swfUpload,它可以让您更改 stile,并在上传之前检查文件大小。

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

希望对你有帮助

【讨论】:

啊...我应该早点在这里问这个问题,而不是花几个小时来调试它。叹息 没关系。我们都做到了:-) swf 存在很多安全风险,但没关系。 markusslima.github.io/bootstrap-filestyle【参考方案3】:

其实你可以的!

您必须使用 SI.Files 库来完成。

Here 是一篇很好的文章,详细介绍了它是如何完成的:

祝你好运!

【讨论】:

【参考方案4】:

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

【讨论】:

谢谢!我尝试了 line-height 但这不起作用。看起来 type="file" 上的字体大小样式是获得高按钮的唯一方法。你可以在这里看到问题jsfiddle.net/gabrieleromanato/mxq9R 光标也看起来不对,接下来尝试修复它。【参考方案5】:

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

下面是一个如何用另一个按钮触发按钮的示例,但这只是众多方法中的一种: One button firing another buttons click event

【讨论】:

【参考方案6】:

嘿, 只需将 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 或其他地方获得您所拥有的内容;)

【讨论】:

您显然没有阅读 OP 提出的问题...【参考方案7】:

有史以来最好的破解。输入文件 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')
    );

【讨论】:

以上是关于我们可以改变 <input type="file"> 样式吗? [复制]的主要内容,如果未能解决你的问题,请参考以下文章

input框改变type属性

如何更改 <input type=Date> 的特定日期的颜色? [复制]

关于去除input type='file'改变组件的默认样式换成自己需要的样式的解决方案

如何修改input[type="file"]的默认样式

使用 jQuery 获取带有数据的 HTML

wdatepicker 日期空间 <input type="text"> 时间改变触发事件不好使怎么办