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

<p:fileUpload mode="simple"/>如果您想自定义filupload按钮,我不建议使用.像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);
}