文件输入按钮样式与jQuery-UI [英] File Input Button Style with jQuery-UI

问题描述

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

I'm using jQuery UI and I notice that the Input File button:

<input type="file">

不能像其他按钮一样样式。我发现此插件看起来很酷，显然允许您

can't be styled like other buttons. I found this plugin which looks cool and apparently allows you to put an image instead of the button, but the examples don't show any button styling.

如果没有jQuery可以将主题样式应用到该按钮，我可以

If there's no jQuery to apply the theme style to that button, can I style it myself in CSS?

推荐答案

是的，只有CSS。

制作< form> ，将< div> 将< input type =file> 插入< div> 。

要覆盖< input type =file> 的默认样式，主要优先级是设置 opacity：0; ，以便样式来自< div> css。

To override the default styling of the <input type="file">, the main priority is to set the opacity: 0; on the input so that the styling comes from the <div> css.

UPDATE：

< input type =file> 您需要一些jQuery。

To get the text from the <input type="file"> you need a bit of jQuery.

段。然后使用 val（） 并将其设置为段落文本。更新小提琴：

For example, add a paragraph. Then get the text from the input using val() and set it as the paragraphs text. Updated Fiddle:

小提示演示

这篇关于文件输入按钮样式与jQuery-UI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！