如何编辑<rich:fileUpload> CSS？

Question

我试图只显示按钮add下面的按钮和上传的图片,但是我在CSS中做的并不重要,生成的表richfaces总是一样的:

这是我的表格使用richfaces:

<ui:define name="content">
        <h:form>
            <h:panelGrid>
                <rich:fileUpload fileUploadListener="#{fileUploadBean.listener}" id="upload" acceptedTypes="jpg, gif, png, bmp"  ontyperejected="alert('Just JPG, GIF, PNG and BMP are allowed');" maxFilesQuantity="12" immediateUpload="true" >
                    <a4j:ajax event="uploadcomplete" execute="@none" render="info" />
                </rich:fileUpload>

                <h:panelGroup id="info">
                    <h:outputText value="Add picture" rendered="#{fileUploadBean.size==0}" />
                    <rich:dataGrid columns="4" value="#{fileUploadBean.files}" var="file" rowKeyVar="row">
                        <a4j:mediaOutput element="img" mimeType="image/jpeg" createContent="#{fileUploadBean.paint}" value="#{row}" style="width:100px; height:100px;" cacheable="false" />
                    </rich:dataGrid>

                    <br />
                    <a4j:commandButton action="#{fileUploadBean.clearUploadData}" render="info, upload" value="Clear Uploaded Data" rendered="#{fileUploadBean.size>0}" />
                </h:panelGroup>
            </h:panelGrid>
        </h:form>
    </ui:define>

这是如何生成的:

我想要一些更简单的东西'因为在另一个时刻我会有一些jQuery slider插件.但我不能用这个表生成的消失richfaces.是的,我的richfaces配置中禁用了皮肤:

更新 根据建议我的CSS现在看起来像这样:

    <style>
    div div.rf-fu { border: 0px; width: 85px; }
    div div.rf-fu-hdr { border: 0px; }
    span span.rf-fu-btn-clr { border: 0px; }
    span.rf-fu-btns-lft{ width: 85px; }
    span.rf-fu-btns-rgh{ display: none; }
    div div.rf-fu-lst { display:none; }
    </style>

现在我的add..文件按钮看起来像:

这些帖子也很有用:

我应该使用'border:none'还是'border:0'？
内部div有边框 - 如何覆盖外部div上的类？

Answer 1

您可以使用Adrian的答案来覆盖richfaces css,但是您不需要使用!important来覆盖richfaces css.只需使用选择器特异性来覆盖richfaces应用的css.

对于您正在使用的实例important,请将css应用为:

div div.rf-fu-lst { display:none } 它会对你有用.