2

I've been having difficulty changing the active colour of an icon in my tabpanel item in Sencha Touch 2.2. I've tried lots of variations of CSS and SASS but have not managed to change it. The CSS I have tried:

.x-tabbar.x-docked-bottom .x-tab-active {
color: #000000;
background-color: #000000;

}

.x-tab-active {
background-color: #000000;
color: #000000;
}

I've also tried setting the active colour in SASS, but this doesn't seem to work either. The only bit of CSS that seems to have that blue in it is this bit:

.x-tabbar-light .x-tab-active .x-button-icon::before {
color: #1da2ff;
}

...but when I try setting that to black, nothing happens! Anyone have any ideas how I can change it??

Screengrab of Touch 2.2 Project

EDIT: I tried the first suggestion changing the CSS to this:

 .x-tabbar-light .x-tab-active .x-button-icon {
 background-color: #000000;
 }

...but this is what I see:

Image 2

4

3 回答 3

2

应用于伪元素是正确的color: #1da2ff;。:before

它对您不起作用的原因是该规则被另一个具有更具体选择器的规则覆盖：

.x-tabbar-dark.x-docked-bottom .x-tab-active .x-button-icon:before {
  color: #50b7ff;
}

!important这是使用适当且不可耻的确切情况：

.x-button-icon:before {
  color: #1da2ff !important;
}
于 2013-06-18T09:22:40.493 回答
0

通过选择作为跨度的图标而不是作为 div 的包装，您有正确的想法。

div wrap .x-tab-active 的背景颜色决定了活动框的背景。图标有一个图像遮罩，因此背景颜色或背景图像渐变将决定图标的颜色。还有一个包装文本的额外跨度，例如“x-button-label”，颜色样式将更改其颜色。

要更改图标的颜色，请尝试：

.x-tabbar-light .x-tab-active .x-button-icon {
   background-color: #1da2ff;
 }
于 2013-06-17T21:19:54.217 回答
0

非常感谢，在我的 CSS 中添加这个就足够了：

.x-tabbar-light.x-docked-bottom .x-tab-active .x-button-icon:before {
color : #000;

}

由于我使用 ST 2.2 的新基本主题，因此无需添加 !important，但您的解决方案效果很好！

:-)

于 2013-06-20T16:15:51.990 回答