从Primefaces p:fileUpload删除文件上传和取消按钮 [英] Remove File Upload and Cancel Button from Primefaces p:fileUpload

问题描述

我想从p:fileUpload中删除上载和取消按钮.对于上传"按钮，我尝试过这样的CSS(不同版本):

I would like to remove upload and cancel button from p:fileUpload. For Upload button I tried css like this (in different variations):

.ui-fileupload-upload button {
        display: none;
}

但它仍然可见.

<button type="button"
    class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left ui-state-disabled ui-fileupload-upload"
    disabled="disabled">
    <span
        class="ui-button-icon-left ui-icon ui-c ui-icon-arrowreturnthick-1-n"></span>
    <span class="ui-button-text ui-c">Upload</span>
</button>

我看到了此出版物[链接](如何删除上传从< p:fileUpload> 中取消按钮)，然后再次尝试使用不同的CSS，但我没有设法摆脱它.谢谢.

I saw this publication [a link] (how to remove upload cancel button from <p:fileUpload>) and tried again different css but i did not manage to get rid of it. Thanks.

推荐答案

PrimeFaces 6.x或更高版本

至少使用以下属性:

PrimeFaces 6.x or newer

Use at least these attributes:

<p:fileUpload ... auto="true" skinSimple="true" />

PrimeFaces 4.x/5.x

您只能为此使用CSS，因为他们删除了showButtons属性:

.ui-fileupload-buttonbar .ui-fileupload-upload {
    display: none;
}
.ui-fileupload-buttonbar .ui-fileupload-cancel {
    display: none;
}

当心CSS排序规则，另请参见如何如何使用自定义样式覆盖默认的PrimeFaces CSS?

Beware of CSS ordering rules, see also How do I override default PrimeFaces CSS with custom styles?

至少使用以下属性:

<p:fileUpload ... auto="true" showButtons="false" />

这篇关于从Primefaces p:fileUpload删除文件上传和取消按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！