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页面：

文件上传器

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

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ı的答案针对找到此主题的其他googlers的primefaces 5进行了更新：

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