如何編輯<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 }它會對你div div.rf-fu-lst { display:none } 。

Answer 2

我正在為我的項目做這個。 你必須覆蓋樣式表中的richfaces css，如下所示：

.rf-fu, .rf-fu-hdr {
    float: left;
    width: auto;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
}

.rf-fu-btn-cnt-add {
    paddin-left: 0;
    cursor: pointer;
}

.rf-fu-btn-add {
    margin: 0;
}

.rf-fu-btns-rgh, .rf-fu-lst {
    display: none;
}

.rf-fu-btns-lft {
    width: 100%;
}