Primefaces FileUpload - 简单的引导样式？

Question

我在* .xhtml + PF 3.5页面上实现了文件上传控制器：

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

我不会在上传器中使用任何样式，但是，它看起来像是：

我想让它看起来像PF页面：

File Uploader

我需要改变什么？我非常感谢你的回答！

Answer 1

如果要自定义filupload按钮，建议不要使用<p:fileUpload mode="simple"/>。给background-color或其他类似的css属性会产生奇怪的外观和感觉。

而不是它，您可以使用<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);
}

生成这样的文件上传按钮：

Answer 2

ÖmerFarukAlmalı的答案为 primefaces 5 更新了发现此帖子的其他googlers：

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