The following example shows how you can set the swatch grid background color on a Flex 3 ColorPicker control by setting the swatchGridBackgroundColor style. You can also see how you can set the horizontalGap, and verticalGap styles using CSS.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/29/changing-the-swatch-grid-background-color-for-a-colorpicker-control-in-flex-3/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="top"
backgroundColor="white"
creationComplete="init();">
<mx:Style>
.myCustomSwatchPanelStyleName {
/* border */
swatchBorderColor: white;
swatchBorderSize: 1;
/* highlight */
swatchHighlightColor: black;
swatchHighlightSize: 2;
/* gap */
horizontalGap: 2;
verticalGap: 2;
/* background */
swatchGridBackgroundColor: red;
}
</mx:Style>
<mx:Form>
<mx:FormItem label="default:">
<mx:ColorPicker />
</mx:FormItem>
<mx:FormItem label="horizontalGap/verticalGap = 2:">
<mx:ColorPicker id="colorPicker"
swatchPanelStyleName="myCustomSwatchPanelStyleName" />
</mx:FormItem>
</mx:Form>
</mx:Application>
View source is enabled in the following example.
