Change highlight color for TextInput control's selected text

Question

I have a Flex3 TextInput control, with white text on a black background. I would like to change the style of highlighted text within the control to use black text on a white background (or something similar). I would love to do this using Flex styles, however I'm comming up empty handed. Any ideas?

Answer 1

I've chased this as well some time ago and came to a dead end. What I found is this is a limitation hardcoded in the Flash player. I'd love it if someone could prove me wrong, but I'm confident this is the case. As the other poster noted, this is no longer an issue with the new Spark components.

Answer 2

textinput.setStyle(“unfocusedTextSelectionColor”,”#00FF00″);
textinput.setStyle(“focusedTextSelectionColor”,”#00FF00″);
textinput.setStyle(“inactiveTextSelectionColor”,”#00FF00″);

You might need to place the code in a custom styleInitialized() method:

override public function stylesInitialized():void
{
    super.stylesInitialized();

    textinput.setStyle(“unfocusedTextSelectionColor”,”#00FF00″);
    textinput.setStyle(“focusedTextSelectionColor”,”#00FF00″);
    textinput.setStyle(“inactiveTextSelectionColor”,”#00FF00″);
};

For more details about setting styles see: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/supportClasses/SkinnableTextBase.html#style:focusColor

Good luck, Rob

Answer 3

With Flex 3, simply change your style to get the desired effect.

MXML:

<mx:TextInput
        styleName="{(whatever.isSomething() || whatever.isSomethingElse()) ? 'TextInputBlackOnWhite' : 'TextInputWhiteOnBlack'}"
        text="{whatever.value}"/>

Styles:

.TextInputBlackOnWhite
{
    borderSkin: Embed(source="assets/images/TextInput_BlackOnWhite.png", scaleGridLeft="2",scaleGridTop="2",scaleGridRight="19",scaleGridBottom="19");
    color: #000000;
}

.TextInputWhiteOnBlack
{
    borderSkin: Embed(source="assets/images/TextInput_WhiteOnBlack.png", scaleGridLeft="2",scaleGridTop="2",scaleGridRight="19",scaleGridBottom="19");
    color: #FFFFFF;
}