Primefaces FileUpload - Simple bootstrap style?

J'ai mis en œuvre le téléchargement du fichier contrôleur sur mon *.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>

Je ne l'utilise pas tout les styles à l'uploader, mais pour le moment, ça ressemble à ça:

Primefaces FileUpload - Simple bootstrap style?

Je veux que ça ressemble sur le PF Page:

Fichier Uploader

Que dois-je changer? J'apprécie vraiment votre réponse!!!

Affichage de Chrome est différent de firefox, de sorte que voulez-vous dire 'comme PF' page ?
Merci pour votre réponse! Je veux dire comme sur la PF Page(lien: primefaces.org/showcase/ui/fileUploadSimple.jsf), lorsque vous changez de THÈME Bootstrap.
changement de thème pour le Bootstrap n'est pas de changer la façon dont <p:fileUpload mode="simple"/> ressemble. Ai-je raté quelque chose?
yep c'est vrai!
donc, vous devriez suivre ma réponse à personnaliser fichier bouton upload 🙂

OriginalL'auteur maximus | 2013-04-23

  1. 9

    Je ne recommande pas d'utiliser <p:fileUpload mode="simple"/> si vous souhaitez personnaliser le filupload bouton. Donner des propriétés css comme background-color ou d'autres vont se produire bizarre look&feel.

    Au lieu de cela, vous pouvez utiliser <p:fileUpload mode="advance"/> et de modifier quoi que ce soit, .ui-fileupload .fileinput-button classe fournit à bouton modifier du css, .fileupload-content rend facile de manipuler le contenu de la feuille de style css. Par exemple:

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

.fileupload-content {
    display: none;
}

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

    Génère un fichier de ce type bouton upload:

    Primefaces FileUpload - Simple bootstrap style?

    OriginalL'auteur Ömer Faruk Almalı

  2. 5

    Ömer Faruk Almalı la réponse de mise à jour pour primefaces 5 pour les autres googlers qui trouver ce fil:

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

    OriginalL'auteur acsadam0404