Selected button text color

1

So… all I want to do is to have a toggle button which changes label color to #999999 when selected. But for some reason i cant get it to work :hurt:

This is my code for the button:

package components.main_content.submenu.submenu_link
{
	import components.NoTruncationUITextField;
	
	import flash.display.DisplayObject;
	import flash.events.Event;
	import flash.text.TextLineMetrics;
	
	import mx.controls.Button;

	public class SubmenuLink extends Button
	{
		private var _index:Number;
		
		public function SubmenuLink(_label:String, index:Number)
		{
			super();
			
			this.toggle = true;
			this._index = index;
			this.styleName = "SubmenuLink";
			setHandCursorOnMouseover();
		}

		private function setHandCursorOnMouseover():void{
			useHandCursor = true;
			buttonMode = true;
			mouseChildren = false;
		}
		
		override protected function createChildren():void
		{
		// Create a UITextField to display the label.
			if (!textField){
				textField = new NoTruncationUITextField();
				textField.styleName = this;
				addChild(DisplayObject(textField));
			}
			
			super.createChildren();
			
			textField.multiline = true;
			textField.wordWrap = true;
			textField.width = width;
		}
		
		override protected function measure():void
	{
		if (!isNaN(explicitWidth))
		{
			var w:Number = explicitWidth;
			w -= getStyle("horizontalGap") + getStyle("paddingLeft") + getStyle("paddingRight");
			textField.width = w;
		}
		super.measure();
	
	}

    override public function measureText(s:String):TextLineMetrics
	{
		textField.text = s;
		var lineMetrics:TextLineMetrics = textField.getLineMetrics(0);
		lineMetrics.width = textField.textWidth + 4;
		lineMetrics.height = textField.textHeight + 4;
		return lineMetrics;
	}
		

		public function getIndex():Number{
			return _index;
		}
		
	}
}

my CSS:

Button.SubmenuLink{
	skin: ClassReference("skins.SubmenuButtonSkin");
	text-align: right;
	color: #FFFFFF;
	textSelectedColor: #999999;
	textRollOverColor: #999999;
	themeColor: #000000;
	borderColor: #000000;
	border-style: none;
}

and the skin class:

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100"
	creationComplete="init()">

	 <mx:Script>
      <![CDATA[
      	import mx.core.IUITextField;
         import mx.controls.Button;
         import mx.core.UITextField;
         
         use namespace mx_internal;
         
         [Bindable]
         private var textField:IUITextField;
         
         private function init():void
         {
            var button:Button = (parent as Button);
            textField = button.getTextField();
            textField.filters = [shadow];
            //filters = [bevel, dropshadow];
         }
         
      ]]>
   </mx:Script>


	<mx:GlowFilter id="glow" color="#FFFFFF" alpha="0.2" strength="4" />
	<mx:DropShadowFilter id="shadow" alpha="0.5" quality="2" distance="2" blurX="5" blurY="5" />

	<mx:states>
		<mx:State name="up">

		</mx:State>
		<mx:State name="down">
			
		</mx:State>
		<mx:State name="over">
			<mx:SetProperty target="{textField}" name="filters" value="{[]}" />
		</mx:State>
		
		<mx:State name="selectedOver">
			<mx:SetProperty target="{textField}" name="filters" value="{[glow]}" />
		</mx:State>
		
		<mx:State name="selectedUp">
			<mx:SetProperty target="{textField}" name="filters" value="{[glow]}" />
		</mx:State>
		
		<mx:State name="selectedDown">
			<mx:SetProperty target="{textField}" name="filters" value="{[glow]}" />
		</mx:State>
	</mx:states>
	<mx:transitions>
		<mx:Transition fromState="*" toState="over">
			
		</mx:Transition>
	</mx:transitions>
	
</mx:Canvas>

I tried assigning it with CSS (text-selected-color) and failed, i tried putting <mx:SetProperty target=“{textField}” name=“textColor” value=“0x999999” /> in my skin class in all “selected” states but it worked only when run (one of the buttons starts as selected)… as soon as i ran my mouse over it or clicked another button it reverted back to the original color. Any ideas?:blush: