Primefaces fileupload - simple bootstrap style?

Question

I implemented a file upload controller on my * .xhtml + PF 3.5 page:

<div class="control-group"> <h:form enctype="multipart/form-data"> <p:messages showDetail="true" /> <p:fileUpload value="#{fileUploadController.file}" mode="simple" /> <p:commandButton value="Submit" ajax="false" actionListener="#{fileUploadController.upload}" /> </h:form> </div> 

I do not use any styles in the bootloader, however at the moment it looks like this:

I want this to look on the PF page:

File uploader

What do i need to change? I really appreciate your answer !!!

Answer 1

I do not recommend using <p:fileUpload mode="simple"/> if you want to configure the filupload button. Providing css properties, such as background-color or others, will occur with a strange look and feel.

Instead, you can use <p:fileUpload mode="advance"/> and change any of this, the .ui-fileupload .fileinput-button class provides a css button to change, .fileupload-content makes it easy to manipulate css content. For instance:

 .fileupload-buttonbar { background: transparent none; border: none; } .fileupload-content { display: none; } .ui-fileupload .fileinput-button { background-color: rgba(142, 103, 64, 0.98); } 

Creates the following file upload button:

Answer 2

Ömer Faruk Almalı responds updated for 5 primary fonts for those looking for this stream:

 .ui-fileupload-buttonbar { background: transparent none; border: none; } .ui-fileupload-content { display: none; } .ui-fileupload-buttonbar .ui-fileupload-choose { background-color: rgba(142, 103, 64, 0.98); }