Flex 3: How do I set a gradient background color of a *selected* Tabbar tab instance?

Question

Is there a way of setting the selected tab of a TabBar so that it contains a gradient background color? I would have thought that combining fillColors and fillAplhas would be the styles to use but this sets the other non selected tab background colors as you can see if you run the code below.

The goal is to get end users to choose the background color of the selected tab instance (by using a ColorPicker for example). And I want to apply some gradient effect on this color.

Any help would be appreciated as I have been trying to get this working for far too long. I have searched endlessly on google for this but still can't get a working solution.

private function updateTabColor():void {        
    var selectedTabIndex : int = tabBar.selectedIndex;        
    var tab:Tab = Tab(tabBar.getChildAt(selectedTabIndex));

    /* this works but not on the selected tab */
    tab.setStyle("fillColors", ["#000000", "000000"]);
    tab.setStyle("fillAlphas", [1.0, 0.4]);

    /* when not commented and as expected, tab is red */ 
    //tab.setStyle("backgroundColor", "red");

    /* when not commented, doesn't work as it appears it's deprecated in 3.0 */
    //tab.setStyle("selectedFillColors", "red");   
}

<mx:TabBar id="tabBar" dataProvider="viewStack" width="100%" itemClick="{updateTabColor()}"/>
<mx:ViewStack id="viewStack"  width="100%" height="100%">
  <mx:Box id="tab1" label="tab1" width="100%" height="100%"/>
  <mx:Box id="tab2" label="tab2" width="100%" height="100%"/>
  <mx:Box id="tab3" label="tab3" width="100%" height="100%"/>
</mx:ViewStack>

Answer 1

http://userflex.wordpress.com/2008/02/14/skin-tabnavigator-tabs/

^ describes using a skin for the tab instead of using the styles provided

Copied here for history

CSS

.tab
{
     up-skin: ClassReference("TabSkin");
     down-skin: ClassReference("TabSkin");
     over-skin: ClassReference("TabSkin");
     selected-up-skin: ClassReference("SelectedTabSkin");
     selected-down-skin: ClassReference("SelectedTabSkin");
     selected-over-skin: ClassReference("SelectedTabSkin");

     background-color: #FFFFFF;

     font-weight: normal;
     color: #000000;
     text-roll-over-color: #000000;

     corner-radius: 0;

     border-style: solid;
     border-thickness: 1;
     border-color: #000000;
}

.selectedTab
{
     background-color: #000000;

     font-weight: bold;
     color: #FFFFFF;
     text-roll-over-color: #FFFFFF;

     corner-radius: 0;

     border-style: solid;
     border-thickness: 1;
     border-color: #000000;
}

AS3

package
{
     import mx.containers.Canvas;

     public class TabSkin extends Canvas
     {
         override protected function updateDisplayList
             (w : Number, h : Number) : void
         {
             this.styleName = "tab";

             super.updateDisplayList (w, h);
         }
     }
}

package
{
     import mx.containers.Canvas;

     public class SelectedTabSkin extends Canvas
     {
         override protected function updateDisplayList
             (w : Number, h : Number) : void
         {
             this.styleName = "selectedTab";

             super.updateDisplayList (w, h);
         }

     }
}

MXML

<mx:TabNavigator id="tabs"
    tabStyleName="tab" selectedTabTextStyleName="selectedTab" />