GWT DecoratedTabPanel選項卡按鈕顏色

Question

如何更改DecoratedTabPanel中選項卡的顏色？我不是指內容，而是你點擊的按鈕來選擇一個標籤。

Answer 1

據我所知，真的不是一個簡單的方法來做到這一點。由於裝飾性的選項卡面板使用嵌套的表層來獲得奇特的圓角，因此您需要更改所有內容和創建自己的圓角以更改選項卡的顏色。

下面是選項卡的GWT默認樣式。應該很明顯，你需要在你的樣式表中重寫以獲得所需的效果（查找bg顏色）。

.gwt-TabBar { 
} 
.gwt-TabBar .gwt-TabBarFirst { 
width: 5px; /* first tab distance from the left */ 
} 
.gwt-TabBar .gwt-TabBarRest { 
} 
.gwt-TabBar .gwt-TabBarItem { 
margin-left: 6px; 
padding: 3px 6px 3px 6px; 
cursor: pointer; 
cursor: hand; 
color: black; 
font-weight: bold; 
text-align: center; 
background: #d0e4f6; 
} 
.gwt-TabBar .gwt-TabBarItem-selected { 
cursor: default; 
background: #92c1f0; 
} 
.gwt-TabBar .gwt-TabBarItem-disabled { 
cursor: default; 
color: #999999; 
} 
.gwt-TabPanel { 
} 
.gwt-TabPanelBottom { 
border-color: #92c1f0; 
border-style: solid; 
border-width: 3px 2px 2px; 
overflow: hidden; 
padding: 6px; 
} 

.gwt-DecoratedTabBar { 
} 
.gwt-DecoratedTabBar .gwt-TabBarFirst { 
width: 5px; /* first tab distance from the left */ 
} 
.gwt-DecoratedTabBar .gwt-TabBarRest { 
} 
.gwt-DecoratedTabBar .gwt-TabBarItem { 
border-collapse: collapse; 
margin-left: 6px; 
} 
.gwt-DecoratedTabBar .tabTopCenter { 
padding: 0px; 
background: #d0e4f6; 
} 
.gwt-DecoratedTabBar .tabTopLeft, 
.gwt-DecoratedTabBar .tabTopRight { 
padding: 0px; 
zoom: 1; 
} 
.gwt-DecoratedTabBar .tabTopLeftInner, 
.gwt-DecoratedTabBar .tabTopRightInner { 
width: 6px; 
height: 6px; 
} 
.gwt-DecoratedTabBar .tabTopLeft { 
background: url(images/corner.png) no-repeat 0px -55px; 
-background: url(images/corner_ie6.png) no-repeat 0px -55px; 
} 
.gwt-DecoratedTabBar .tabTopRight { 
background: url(images/corner.png) no-repeat -6px -55px; 
-background: url(images/corner_ie6.png) no-repeat -6px -55px; 
} 
* html .gwt-DecoratedTabBar .tabTopLeftInner, 
* html .gwt-DecoratedTabBar .tabTopRightInner { 
width: 6px; 
height: 6px; 
overflow: hidden; 
} 
.gwt-DecoratedTabBar .tabMiddleLeft, 
.gwt-DecoratedTabBar .tabMiddleRight { 
width: 6px; 
padding: 0px; 
background: #d0e4f6; 
} 
.gwt-DecoratedTabBar .tabMiddleLeftInner, 
.gwt-DecoratedTabBar .tabMiddleRightInner { 
width: 1px; 
height: 1px; 
} 
.gwt-DecoratedTabBar .tabMiddleCenter { 
padding: 0px 4px 2px 4px; 
cursor: pointer; 
cursor: hand; 
color: black; 
font-weight: bold; 
text-align: center; 
background: #d0e4f6; 
} 
.gwt-DecoratedTabBar .gwt-TabBarItem-selected .tabTopCenter { 
background: #92c1f0; 
} 
.gwt-DecoratedTabBar .gwt-TabBarItem-selected .tabTopLeft { 
background-position: 0px -61px; 
} 
.gwt-DecoratedTabBar .gwt-TabBarItem-selected .tabTopRight { 
background-position: -6px -61px; 
} 
.gwt-DecoratedTabBar .gwt-TabBarItem-selected .tabMiddleLeft, 
.gwt-DecoratedTabBar .gwt-TabBarItem-selected .tabMiddleRight { 
background: #92c1f0; 
} 
.gwt-DecoratedTabBar .gwt-TabBarItem-selected .tabMiddleCenter { 
cursor: default; 
background: #92c1f0; 
} 
.gwt-DecoratedTabBar .gwt-TabBarItem-disabled .tabMiddleCenter { 
cursor: default; 
color: #999999; 
} 

Answer 2

你想要做的是Change the CSS of GWT tabBar Items。我認爲下面的一段CSS代碼會在你的具體情況下做。

.gwt-DecoratedTab*Bar* .gwt-TabBarItem { background:#FF0; } 

而且，看看this site和this reference。