如何为rich：tabPanel中的选项卡添加背景颜色

Question

我为tabPanel添加了rich：tabPanel和应用的样式。但无法为tabPanel内的选项卡添加背景颜色。有人告诉styleClass for rich：tab

XTML

<td width="80%" height="100%" style="vertical-align: top;"><rich:tabPanel
                                id="tabId" switchType="ajax" >
                                <rich:tab id="section1">
                                    <ui:include src="/pages/design/hrms/Section1.xhtml" />
                                </rich:tab>
                                <rich:tab id="section2" header="#{msg.lbl_section2}">
                                    <ui:include src="/pages/design/hrms/Section2.xhtml" />
                                </rich:tab>
                                <rich:tab id="section3" header="#{msg.lbl_section3}">
                                    <ui:include src="/pages/design/hrms/Section3.xhtml" />
                                </rich:tab>
                                <rich:tab id="section4" header="#{msg.lbl_section4}">
                                    <ui:include src="/pages/design/hrms/Section4.xhtml" />
                                </rich:tab>
                                <rich:tab id="section5" header="#{msg.lbl_section5}">
                                    <ui:include src="/pages/design/hrms/Section5.xhtml" />
                                </rich:tab>
                                <rich:tab id="section6" header="#{msg.lbl_section6}">
                                    <ui:include src="/pages/design/hrms/Section6.xhtml" />
                                </rich:tab>
                                <rich:tab id="section7" header="#{msg.lbl_section7}">
                                    <ui:include src="/pages/design/hrms/Section7.xhtml" />
                                </rich:tab>
                                <rich:tab id="section12" header="#{msg.lbl_section12}">
                                    <ui:include src="/pages/design/hrms/Section12.xhtml" />
                                </rich:tab>
                                <rich:tab id="section13" header="#{msg.lbl_section13}">
                                    <ui:include src="/pages/design/hrms/Section13.xhtml" />
                                </rich:tab>
                                <rich:tab id="section14" header="#{msg.lbl_section14}">
                                    <ui:include src="/pages/design/hrms/Section14.xhtml" />
                                </rich:tab>
                            </rich:tabPanel></td>

的style.css

.rf-tab-hdr-spcr {
    background: rgb(255, 255, 255); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 2%,
        rgba(255, 255, 255, 1) 35%, rgba(161, 214, 255, 1) 100% );
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(2%, rgba(255,
        255, 255, 1) ), color-stop(35%, rgba(255, 255, 255, 1) ),
        color-stop(100%, rgba(161, 214, 255, 1) ) ); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 2%,
        rgba(255, 255, 255, 1) 35%, rgba(161, 214, 255, 1) 100% );
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 2%,
        rgba(255, 255, 255, 1) 35%, rgba(161, 214, 255, 1) 100% );
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 2%,
        rgba(255, 255, 255, 1) 35%, rgba(161, 214, 255, 1) 100% ); /* IE10+ */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 2%,
        rgba(255, 255, 255, 1) 35%, rgba(161, 214, 255, 1) 100% ); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(             startColorstr='#ffffff',
        endColorstr='#a1d6ff', GradientType=0 ); /* IE6-9 */
}

Answer 1

如果您使用Firebug进行验证，您可能会注意到您的CSS被RichFaces样式覆盖，因为您的CSS并不那么重要。

更改它的一种简单方法是为您的h:form包装器设置一个ID并将其添加到您的CSS中：

<h:form id="myForm">
    <!-- code -->

    <rich:tabPanel>
        <!-- code -->
    </rich:tabPanel>

    <!-- code -->
</h:form>

你的style.css：

#myForm .rf-tab-hdr-spcr {
    /* your css */
}

Answer 2

rich:tab的样式类可以在RichFaces3.x guide找到，RichFaces4.x guide

如下面的屏幕截图所示，您可以覆盖rich-tab-active（对于活动标签的样式）和rich-tab-inactive（对于非活动标签的样式）。

我已将活动制表符的background-color属性覆盖为黄色，而background-color属于非活动制表符的红色。重要的是删除background-image属性（可以在屏幕截图中看到）。

在JSP / XHTML页面中尝试以下CSS，

.rich-tab-active
{
  background-image : none;
  background-color: yellow;
}