Is there a style that will change the caret selection color in a Spark List?

Question

Is there a style or property that will change the caret selection color in a Spark List?

Note: The caret selection is the border color around a row when using the keyboard navigation. It is not the selected row.

Answer 1

Okay, tested around a bit and

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
            xmlns:s="library://ns.adobe.com/flex/spark" 
            xmlns:mx="library://ns.adobe.com/flex/mx" 
            autoDrawBackground="true" height="60">
<fx:Script>
    <![CDATA[

        [Bindable] public var color1:uint = 0xE54545;
        [Bindable] public var color2:uint = 0xE5D145; 
        [Bindable] public var color3:uint = 0xA3E545;
        [Bindable] public var color4:uint = 0x45E5C6;
        [Bindable] public var color5:uint = 0x4564E5;
        [Bindable] public var color6:uint = 0xE545C6;


    ]]>
</fx:Script>


    <s:states>
        <s:State name="normal"/>            
        <s:State name="hovered"/>
        <s:State name="selected"/>
        <s:State name="normalAndShowsCaret"/>
        <s:State name="hoveredAndShowsCaret"/>
        <s:State name="selectedAndShowsCaret"/>
    </s:states>


    <s:Rect left="0" right="0" top="0" bottom="0">
        <s:stroke.normalAndShowsCaret>
            <s:SolidColorStroke 
                color="{color1}" 
                weight="1"/>
        </s:stroke.normalAndShowsCaret>
        <s:stroke.hoveredAndShowsCaret>
            <s:SolidColorStroke 
                color="{color2}" 
                weight="1"/>
        </s:stroke.hoveredAndShowsCaret>
        <s:stroke.selectedAndShowsCaret>
            <s:SolidColorStroke 
                color="{color3}" 
                weight="1"/>
        </s:stroke.selectedAndShowsCaret>
        <s:fill>
            <s:SolidColor 
                color.normal="{color1}"
                color.normalAndShowsCaret="{color2}" 
                color.hovered="{color3}"
                color.hoveredAndShowsCaret="{color4}"
                color.selected="{color5}"
                color.selectedAndShowsCaret="{color6}"
                />
        </s:fill>
    </s:Rect>

   <s:Label text="{data}"/> 
</s:ItemRenderer>

and the actual caret color is third stroke, "s:stroke.selectedAndShowsCaret". Why my first comment didn't work was because it is also binded to color="{selectionColor}" by default, so you need to make a custom itemrender or adjust your current itemrenderer to match.

Answer 2

Yes, it's property "selectionColor"

list.setStyle("selectionColor", "#SOME_VALUE") or <s:List id="list" selectionColor="red"/>