GWT DecoratedTabPanel选项卡按钮颜色

Question

如何更改DecoratedTabPanel中选项卡的颜色？ 我的意思不是内容，而是您单击以选择选项卡的按钮。

Answer 1

您要做的是更改GWT tabBar Items的CSS 。 我认为以下CSS代码将在您的特定情况下使用。

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

另外，请查看此站点和此参考 。

Answer 2

据我所知，确实没有简单的方法可以做到这一点。 由于装饰的选项卡面板使用嵌套的表格层来获取精美的圆角，因此您似乎需要更改所有内容并制作自己的圆角才能更改选项卡的颜色。

这是标签的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;
}