css - 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 按钮，我不建议使用。提供类似或其他的 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);
}

生成这样一个文件上传按钮：

Answer 2

Ömer Faruk Almalı为找到此线程的谷歌同事更新了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);
}