接下来的例子演示了Flex中如何利用swatchHighlightSize样式，设置ColorPicker控件加亮边框粗细尺寸。

　　下面是完整代码

<?xml version="1.0" encoding="utf-8"?>
<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"
　　　　layout="vertical"
　　　　verticalAlign="top"
　　　　backgroundColor="white"
　　　　creationComplete="init();">
　　
　　<mx:Style>
　　　　ColorPicker {
　　　　　　swatchPanelStyleName: myCustomSwatchPanelStyleName;
　　　　}
　　
　　　　.myCustomSwatchPanelStyleName {
　　　　　　/* border */
　　　　　　swatchBorderColor: white;
　　　　　　swatchBorderSize: 1;
　　　　　　/* highlight */
　　　　　　swatchHighlightColor: red;
　　　　　　swatchHighlightSize: 1;
　　　　}
　　</mx:Style>
　　
　　<mx:Script>
　　　　<![CDATA[
　　　　　　import mx.events.SliderEvent;
　　
　　　　　　private var cssObj:CSSStyleDeclaration;
　　
　　　　　　private function init():void {
　　　　　　　　cssObj = StyleManager.getStyleDeclaration(".myCustomSwatchPanelStyleName");
　　　　　　　　colorPicker.open();
　　　　　　}
　　
　　　　　　private function borderSlider_change(evt:SliderEvent):void {
　　　　　　　　cssObj.setStyle("swatchBorderSize", evt.value);
　　　　　　　　colorPicker.open();
　　　　　　}
　　
　　　　　　private function highlightSlider_change(evt:SliderEvent):void {
　　　　　　　　cssObj.setStyle("swatchHighlightSize", evt.value);
　　　　　　　　colorPicker.open();
　　　　　　}
　　　　]]>
　　</mx:Script>
　　
　　<mx:ApplicationControlBardock="true">
　　　　<mx:FormstyleName="plain">
　　　　　　<mx:FormItemlabel="swatchBorderSize:">
　　　　　　　　<mx:HSliderid="borderSlider"
　　　　　　　　　　　　minimum="0"
　　　　　　　　　　　　maximum="5"
　　　　　　　　　　　　value="1"
　　　　　　　　　　　　liveDragging="true"
　　　　　　　　　　　　snapInterval="1"
　　　　　　　　　　　　tickInterval="1"
　　　　　　　　　　　　change="borderSlider_change(event);"/>
　　　　　　</mx:FormItem>
　　　　　　<mx:FormItemlabel="swatchHighlightSize:">
　　　　　　　　<mx:HSliderid="highlightSlider"
　　　　　　　　　　　　minimum="0"
　　　　　　　　　　　　maximum="5"
　　　　　　　　　　　　value="1"
　　　　　　　　　　　　liveDragging="true"
　　　　　　　　　　　　snapInterval="1"
　　　　　　　　　　　　tickInterval="1"
　　　　　　　　　　　　change="highlightSlider_change(event);"/>
　　　　　　</mx:FormItem>
　　　　</mx:Form>
　　</mx:ApplicationControlBar>
　　
　　<mx:ColorPickerid="colorPicker" />
　　
</mx:Application>