Style p:upload simple inputbutton

Question

I want to style the input button type="file" of the PrimeFaces component <p:fileUpload value="#{dms.fileToUpload}" mode="simple" skinSimple="true" styleClass="chooseFile"/>.

As you can see the whole background of the ` changes and not the input button itself. Is it possible to change the style of the button?

I'm using PrimeFaces 5.1

Using an old PF version? Generated HTML from 5.3 looks totally different. — Kukeltje, Mar 08 '16 at 12:19
The problem is all answers doesnt help me because i cannot add a class to the input which is inside the p:fileUpload. — Anton Styopin, Mar 08 '16 at 12:22
@BalusC: I flagged this as a duplicate to initially, but when starting to look in the PF showcase for a simple mode, it has a 'workaround' in it so you can style the button. So I would like to create an answer taking old and new PF versions into account, where for old versions I refer to this duplicate. Can you 'reopen'? — Kukeltje, Mar 08 '16 at 12:24
all answers don't help since you cannot style an ` in most cases. Please answer my question — Kukeltje, Mar 08 '16 at 12:25
I have found a solution to change the style, but nothing happens onclick anymore. http://jsfiddle.net/4cwpLvae/ This link shows how to change the style of general input type="file" but the primefaces p:fileUpload doesnt seem to work. The "for" element doesnt seem to work. — Anton Styopin, Mar 08 '16 at 12:37

score 1 · Answer 1 · edited May 23 '17 at 10:28

In older PrimeFaces versions, the simple upload used a plain html upload which cannot be styled. PrimeFaces 5.1 is one of the versions where the simple upload could not be styled directly.

The workaround in the fiddle, could work IF you use the right value in the for attribute (I tried it in the showcase).

Newer version however use a 'wrapping workaround', enabled by the skinSimple="true" attribute that you seem to be thinking is also available in your version, which it is not. PrimeFaces generates the following html then as part of the upload widget:

<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>

This ui-button can be style anyway you like, since it 'wraps` the real file input which is effectively invisible.

You can play with this in the PrimeFaces showcase

Thanks for reply. Can you give me the link to the duplicated question linked before? — Anton Styopin, Mar 08 '16 at 12:58

Style p:upload simple inputbutton

1 Answers1