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...

Full Version