How to alter TabBar tab background color in custom TabNavigator component

Question

I'm creating a custom TabNavigator component to be used in other applications. Right now though, the background of the tabs will not change (although other style changes do apply).

in my CustomTabNavigator class, I have this override:

override protected function updateDisplayList (w:Number, h:Number):void {
    super.updateDisplaylist(w,h);

    tabBar.styleName="CustomTabBarStyle";
}

And here is the css in the <style> declaration:

.CustomTabBarStyle {
    tabHeight:100;
    tabWidth:100;
    tabStyleName: "CustomTab";
    backgroundColor: #FFFFFF;
}

.CustomTab {
    backgroundColor: #FFFFFF;
    color: haloBlue;
}

The haloBlue color of the text is applied, as well as the tabHeight and tabWidth. The background color isn't changed though. I've been through about 5 tutorials trying different things, to no avail... is there a way to do this within a custom component? All I'm trying to do is get rid of the gradient background in place of a flat white background.

Answer 1

I was able to do this by extending the TabBar and ButtonBarButton classes. I then made a separate skin for the custom ButtonBarButton that used a custom background color pulled from a new field in the custom class (e.g. hostComponent.tabBackgroundColor).

If someone has a better solution using the CSS method, I'd be happy to accept that instead (as that was what I was originally asking for).