Primefaces FileUpload - Simple bootstrap styling?

Question

I have implemented the 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 on the uploader, however, at the moment it looks like that:

I want to let it look like on the PF Page:

File Uploader

What do I have to change? I really appreciate your answer!!!

Answer 1

I do not recommend to use <p:fileUpload mode="simple"/> if you want to customize the filupload button. Giving css properties like background-color or others will occur weird look&feel.

Instead of it, you can use <p:fileUpload mode="advance"/> and modify anything of it, .ui-fileupload .fileinput-button class provides to change button's css, .fileupload-content makes easy to manipulate content's css. For example:

.fileupload-buttonbar {
    background: transparent none;
    border: none;
}

.fileupload-content {
    display: none;
}

.ui-fileupload .fileinput-button {
    background-color: rgba(142, 103, 64, 0.98);
}

Generates such a file upload button:

Answer 2

Ömer Faruk Almalı's answer updated for primefaces 5 for fellow googlers who find this thread:

.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);
}