Question

我试图用css删除手风琴标签顶部但是它没有去。以下是我的代码片段。我已经尝试了几种css样式但它没有响应。关于如何删除手风琴中每个标签上方的默认栏的建议。

        <div class="ui-g" style="margin-left: 40px ;background:#A9A9A9;width: 80% ">
                        <p:accordionPanel activeIndex="null" style="width: 80% ;">
                            <p:tab title="Analysis" titleStyle="background:#A9A9A9;color:black;width:100px;border-style:none;outline:none;">
                                <p:commandButton  style="background:#A9A9A9;color: black;width:100px;border-style: none;padding: 0px;outline:none;" value="Overview" actionListener="#{bean.setPage('page1')}" update=":mainForm:content"/>
                                <p:commandButton  style="background:#A9A9A9;color: black;width:100px;border-style: none;padding: 0px;outline:none;" value="Analysis" actionListener="#{bean.setPage('page2')}" update=":mainForm:content"/>
                                <p:commandButton   style="background:#A9A9A9;color: black;width:100px;border-style: none;padding: 0px;outline:none;" value="Export" actionListener="#{bean.setPage('page3')}" update=":mainForm:content"/> 
                                <p:commandButton   style="background:#A9A9A9;color: black;width:100px;border-style: none;padding: 0px;outline:none;" value="Analysis" actionListener="#{bean.setPage('page2')}"  onclick="PFE('ppanel').toggle()"  update=":mainForm:content"/> 
                            </p:tab>
                            <p:tab title="Overview" titleStyle="background:#A9A9A9;color:black;width:100px;border-style:none;outline:none;">
                                <p:commandButton  style="background:#A9A9A9;color: black;width:100px;border-style: none;padding: 0px;outline:none;" value="Overview" actionListener="#{bean.setPage('page1')}" update=":mainForm:content"/>
                                <p:commandButton  style="background:#A9A9A9;color: black;width:100px;border-style: none;padding: 0px;outline:none;" value="Analysis" actionListener="#{bean.setPage('page2')}" update=":mainForm:content"/>
                                <p:commandButton   style="background:#A9A9A9;color: black;width:100px;border-style: none;padding: 0px;outline:none;" value="Export" actionListener="#{bean.setPage('page3')}" update=":mainForm:content"/> 
                                <p:commandButton   style="background:#A9A9A9;color: black;width:100px;border-style: none;padding: 0px;outline:none;" value="Analysis" actionListener="#{bean.setPage('page2')}" update=":mainForm:content"/> 
                            </p:tab>
                            <p:tab title="Analysis" titleStyle="background:#A9A9A9;color:black;width:100px;border-style:none;outline:none;">
                                <p:commandButton  style="background:#A9A9A9;color: black;width:100px;border-style: none;padding: 0px;outline:none;" value="Overview" actionListener="#{bean.setPage('page1')}" update=":mainForm:content"/>
                                <p:commandButton  style="background:#A9A9A9;color: black;width:100px;border-style: none;padding: 0px;outline:none;" value="Analysis" actionListener="#{bean.setPage('page2')}" update=":mainForm:content"/>
                                <p:commandButton   style="background:#A9A9A9;color: black;width:100px;border-style: none;padding: 0px;outline:none;" value="Export" actionListener="#{bean.setPage('page3')}" update=":mainForm:content"/> 
                                <p:commandButton   style="background:#A9A9A9;color: black;width:100px;border-style: none;padding: 0px;outline:none;" value="Analysis" actionListener="#{bean.setPage('page2')}" update=":mainForm:content"/> 
                            </p:tab>
                            <p:tab title="Charts" titleStyle="background:#A9A9A9;color:black;width:100px;border-style:none;outline:none;">
                                <p:commandButton  style="background:#A9A9A9;color: black;width:100px;border-style: none;padding: 0px;outline:none;" value="Overview" actionListener="#{bean.setPage('page1')}" update=":mainForm:content"/>
                                <p:commandButton  style="background:#A9A9A9;color: black;width:100px;border-style: none;padding: 0px;outline:none;" value="Analysis" actionListener="#{bean.setPage('page2')}" update=":mainForm:content"/>
                                <p:commandButton   style="background:#A9A9A9;color: black;width:100px;border-style: none;padding: 0px;outline:none;" value="Export" actionListener="#{bean.setPage('page3')}" update=":mainForm:content"/> 
                                <p:commandButton   style="background:#A9A9A9;color: black;width:100px;border-style: none;padding: 0px;outline:none;" value="Analysis" actionListener="#{bean.setPage('page2')}" update=":mainForm:content"/> 
                            </p:tab>
                            <p:tab title="Export" titleStyle="background:#A9A9A9;color:black;width:100px;border-style:none;outline:none;">
                                <p:commandButton  style="background:#A9A9A9;color: black;width:100px;border-style: none;padding: 0px;outline:none;" value="Overview" actionListener="#{bean.setPage('page1')}" update=":mainForm:content"/>
                                <p:commandButton  style="background:#A9A9A9;color: black;width:100px;border-style: none;padding: 0px;outline:none;" value="Analysis" actionListener="#{bean.setPage('page2')}" update=":mainForm:content"/>
                                <p:commandButton   style="background:#A9A9A9;color: black;width:100px;border-style: none;padding: 0px;outline:none;" value="Export" actionListener="#{bean.setPage('page3')}" update=":mainForm:content"/> 
                                <p:commandButton   style="background:#A9A9A9;color: black;width:100px;border-style: none;padding: 0px;outline:none;" value="Analysis" actionListener="#{bean.setPage('page2')}" update=":mainForm:content"/> 
                            </p:tab>
                        </p:accordionPanel>
                    </div>

     <h:outputStylesheet id="layoutCSS">  
        .ui-accordion .ui-accordion-content{
        background:#A9A9A9;
        }
        .ui-button{
        display:none !important;
        }
    </h:outputStylesheet>

Answer 1

尝试使用此选择器

.ui-accordion .ui-accordion-header {
    border-top: none;
}

或者如果您只需要为活动标签隐藏它，你可以使用这个

.ui-accordion .ui-accordion-header.ui-state-active {
    border-top: none;
}

无法删除accordionPanel标签primefaces中的顶部白线

1 个答案: