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 に答える