如何编辑 <rich:fileUpload> CSS？

Posted 2023-02-23

【中文标题】如何编辑 <rich:fileUpload> CSS？

【英文标题】：How edit <rich:fileUpload> CSS?

【发布时间】：2013-04-09 16:12:27

【问题描述】：

我试图只显示按钮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 生成的这张表消失。 是的，皮肤是disable in my richfaces configuration：

更新 按照建议，我的 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.. 文件按钮看起来像：

这些帖子也很有用：

Should I use 'border: none' or 'border: 0'? Inner div has borders - how to override with a class on an outer div?

【问题讨论】：

您是否尝试过使用为richfaces 元素生成的类来覆盖richfaces css？

我试过了，但我忘记了!important 属性

使用!important 是一种不好的做法，应始终将其视为最后的手段！参考：***.com/questions/3706819/…

【参考方案1】：

我目前正在为我的项目做这件事。您必须像这样覆盖样式表中的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%;

【参考方案2】：

您可以使用 Adrian 的答案来覆盖richfaces css，但是您不需要使用!important 来覆盖richfaces css。只需使用selector specificity 覆盖richfaces 应用的css。

例如，如果您使用的是important，请将 css 应用为：

div div.rf-fu-lst display:none 它会为你工作。

【讨论】：

我已经根据您的建议确定了我的答案。非常感谢！

我很高兴@ValterHenrique :)