样式p：上传简单的输入按钮

Question

我想设置输入按钮类型=＆＃34;文件＆＃34; PrimeFaces组件<p:fileUpload value="#{dms.fileToUpload}" mode="simple" skinSimple="true" styleClass="chooseFile"/>。

正如你可以看到`更改的整个背景而不是输入按钮本身。是否可以改变按钮的样式？

我使用的是PrimeFaces 5.1

Answer 1

在较旧的PrimeFaces版本中，简单上传使用了cannot be styled的普通html上传。 PrimeFaces 5.1是无法直接设置简单上传样式的版本之一。

如果你在for属性中使用了正确的值（我在展示中尝试过），那么小提琴中的变通方法就可以了。

然而，较新的版本使用“包装解决方法”，由您似乎认为的skinSimple="true" attribute启用，您的版本也可以使用它。 PrimeFaces生成以下html，然后作为上传小部件的一部分：

<span class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left">
    <span class="ui-button-icon-left ui-icon ui-c ui-icon-plusthick"/>
    <span id="j_idt88:j_idt89_label" class="ui-button-text ui-c">Choose</span>
    <input id="j_idt88:j_idt89_input" name="j_idt88:j_idt89_input" aria-labelledby="j_idt88:j_idt89_label" type="file" />
</span>

这个ui-button无论如何都可以是样式，因为它“包装”了实际上不可见的文件输入。

您可以在PrimeFaces showcase

中使用此功能