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

<p:fileUpload mode="simple"/>filupload ボタンをカスタマイズする場合は、使用をお勧めしません。などの css プロパティを指定background-colorすると、奇妙なルック アンド フィールが発生します。

その代わりに、 <p:fileUpload mode="advance"/>何でも使用および変更できます。.ui-fileupload .fileinput-buttonクラスはボタンの css を変更するために提供し、.fileupload-contentコンテンツの css を簡単に操作できるようにします。例えば：

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

.fileupload-content {
    display: none;
}

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

このようなファイル アップロード ボタンを生成します。