0

我正在尝试更改标签面板的 CSS 这是我的代码

      <g:HTMLPanel>
    <div class="center">
        <g:TabLayoutPanel ui:field="tabPanel" barUnit="PX"
            barHeight="60" width="500px" height="250px" 
                                 styleName="gwt-TabPanel">
            <g:tab >
                <g:header>
                    DashBoard
        </g:header>

我有这个CSS

    .gwt-TabPanel {
    background-color: rgb(36, 36, 36);
    }

    .roundedTab {
    background-color: red;  
    }

   .gwt-TabBar {
    background-color: rgb(36, 36, 36);
    padding-top: 5px;
    }

    .gwt-TabPanelBottom {
    background-color: rgb(64, 64, 64);
    border-top: none;

    padding-top: 1px;
    margin: 0px 0px 3px 0px;
    }

    .gwt-TabBar .gwt-TabBarFirst {
    border-bottom: 1px solid rgb(36, 36, 36);
    padding-left: 3px;
    }

   .gwt-TabBar .gwt-TabBarRest {
    border-bottom: 1px solid rgb(36, 36, 36);
    padding-right: 3px;
    }

   .gwt-TabBar .gwt-TabBarItem {           
    border-bottom: 1px solid rgb(36, 36, 36);

    margin-left: 2px;
    margin-right: 2px;

    cursor: pointer;
    cursor: hand;

    background-color: rgb(48, 48, 48);
    } 

    .gwt-TabBar .gwt-TabBarItem-selected {  
    border-bottom: 1px solid rgb(64, 64, 64);       
    background-color: rgb(64, 64, 64);
    }

    .gwt-TabBar .selectedText {
    color: white;
    background-color: rgb(64, 64, 64);
    font-weight: bold;      
    padding: 3px 7px 5px 7px;
    }

    .gwt-TabBar .unselectedText {
    color: rgb(227, 209, 13);       
    background-color: rgb(48, 48, 48);

    padding: 3px 7px 5px 7px;       
    }

   .gwt-TabBar .onMouseEnter {
    color: white;
    background-color: rgb(64, 64, 64);
    }

    .gwt-TabBar .onMouseLeave {

     }

    .deckPanel {
    margin: 5px;
   }

在此处输入图像描述

但这会使整个选项卡面板变黑，并且选项卡也消失了。我想要的是使每个选项卡（不是完整的选项卡面板）背景颜色为蓝色并删除 tabPanel 的边框

知道我怎么能做到这一点。

在此处输入图像描述

4

1 回答 1

3

从 .gwt-TabPanel 中删除 background-color 属性并添加新的 CSS 属性，

.gwt-TabLayoutPanelTab {
    background-color: blue;
}

.gwt-TabPanel 是整个 Tabpanel 的 CSS，但 .gwt-TabLayoutPanelTab 是应用于每个选项卡的 CSS。

于 2012-09-06T06:28:11.040 回答