how do I disable selection & rollover colors in a list?

Question

How do I disable the rollover, selection & focus colors in a list? I tried setting them to "{null}" but that just makes them black:

<s:Application 
xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark"
width="100%" height="100%"
backgroundColor="white" 
>

<fx:Declarations>
    <s:ArrayCollection id="myArray">
        <fx:String>Item 0</fx:String>
        <fx:String>Item 1</fx:String>
        <fx:String>Item 2</fx:String>
        <fx:String>Item 3</fx:String>
        <fx:String>Item 4</fx:String>
    </s:ArrayCollection>
</fx:Declarations>

<s:VGroup horizontalAlign="center">

    <s:List dataProvider="{myArray}" width="200" height="200"
             focusColor="{null}" selectionColor="{null}"
             rollOverColor="{null}"
            >
        <s:itemRenderer>
            <fx:Component>
                <s:ItemRenderer>
                    <s:states>
                        <s:State name="normal"  />
                        <s:State name="hovered" />
                        <s:State name="selected" />
                    </s:states>



                    <s:Label text="{data}" width="100%" left="5" top="7" bottom="5" />
                </s:ItemRenderer>
            </fx:Component>
        </s:itemRenderer>
    </s:List>

</s:VGroup>
</s:Application>

Answer 1

Try setting autoDrawBackground property in the itemRenderer to false.

<s:itemRenderer >
            <fx:Component>
                <s:ItemRenderer autoDrawBackground="false">
                    <s:states>
                        <s:State name="normal"  />
                        <s:State name="hovered" />
                        <s:State name="selected" />
                    </s:states>

                    <s:Label text="{data}" width="100%" left="5" top="7" bottom="5" />
                </s:ItemRenderer>
            </fx:Component>
        </s:itemRenderer>