ComboBox Background Color - AKH Online, Inc

Flex Spark ComboBox Background Color

Here's something that took me an hour or so of trial and error. Getting the background color of the Flex (~4.6) Spark ComboBox to be custom and universal.

This selection element is for picking from a list of package couriers (ie UPS, FedEx, etc) or optionally adding your own. We wanted to style the element's background color, without skinning.

We find that simply setting contentBackgroundColor to a hex value will only control the color in the dropdown options, not the parent selector.

Doesn't completely work:

<s:ComboBox id="cbCourier" dataProvider="{couriersAC}" labelField="courierName" selectedItem="{thisFoo.courier}" contentBackgroundColor="EFE698" />

That's because the Spark ComboBox can allow users to enter their own selection option. So, in essence, there's also a TextInput component buried in there too.

So you need to style for both elements. Here's how I did it:

In the MXML file:

<s:ComboBox id="cbCourier" dataProvider="{couriersAC}" labelField="courierName" selectedItem="{thisFoo.courier}" />

In the Style Sheet css or Style tag:

#cbCourier s|TextInput {
contentBackgroundColor: #EFE698;
}

Hope this saves you some time...