我想设置PrimeFaces组件<p:fileUpload value="#{dms.fileToUpload}" mode="simple" skinSimple="true" styleClass="chooseFile"/>的输入按钮type =“ file”的样式。

css - 风格p:上传简单输入按钮-LMLPHP

如您所见,`的整个背景都在变化,而不是输入按钮本身。可以更改按钮的样式吗?

我正在使用PrimeFaces 5.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中玩这个游戏

09-30 14:37
查看更多