使用jQuery-UI的文件输入按钮样式

我正在使用jQuery UI，我注意到输入文件按钮：

不能像其他按钮一样设计。 我发现这个插件看起来很酷，显然可以让你放一个图像而不是按钮，但这些例子没有显示任何按钮样式。

如果没有jQuery将主题样式应用于该按钮，我可以自己在CSS中设置样式吗？

Answer 1

是的，你可以，只有CSS。

创建一个

，在其中包装一个

并将放在

。

要覆盖的默认样式，主要优先级是设置opacity: 0; 在输入上，使样式来自

css。

---

更新：

要从获取文本，您需要一些jQuery。

例如，添加一个段落。 然后使用val()从输入中获取文本并将其设置为段落文本。 更新小提琴：

---

小提琴演示

Answer 2

简单的解决方案：

标记：

 
 Upload   

CSS：

 .fileUpload { position: relative; overflow: hidden; margin: 10px; } .fileUpload input.upload { position: absolute; top: 0; right: 0; margin: 0; padding: 0; font-size: 20px; cursor: pointer; opacity: 0; filter: alpha(opacity=0); } 

演示

注意：我使用Bootstrap作为样式按钮（ div.file-upload ）。

Answer 3

可能你想要这样的东西：

HTML：

 
 No file selected.     

CSS：

 input[type="file"] { opacity:0; } #file { background:url('...der_open-add.png') 0 0 no-repeat; width:100%; height:32px; position:relative; overflow:hidden; } #file label { padding:0 0 0 35px; color:green; width:100%; } #file #text { line-height:32px; width:100%; position:absolute; left:0px; top:0; color:green; font-size:11px; } 

和jQuery：

 $('#file input[type="file"]').on('change', function () { var o = this.value || 'No file selected.'; $(this).closest('#file').find('#text').text(o); }); 

---

小提琴

Answer 4

演示：

http://jsfiddle.net/k6zBQ/2/

Answer 5

我的简单解决方案：将输入按钮放在带有css display的div中：none无论如何都要按下你的按钮并绑定一个触发隐藏输入按钮的function。

 
 
  
 
 Click this line to browse all your awesome files JQUERY: $("#browser").on('click', function(){ $(".upload").click(); }); 

小提琴