SEO and Usability Expert
Call Me: 1-813-421-4127

Flex/Flash Builder CSS Properties – Quick Reference

Use these code samples for styling Flex elements. I’ve listed most of the available elements, and you can edit, modify, and remove elements as you wish.

 

Application

Application { backgroundColor: #869ca7; backgroundGradientColors: #9bafb9, #68808c; backgroundGradientAlphas: 1, 1; themeColor: #009dff; color: #0b333c; } 

 

Buttons

Button ( Top )

Button { cornerRadius: 2; textIndent: 2; paddingLeft: 2; paddingRight: 1; paddingTop: 2; paddingBottom: 2; letterSpacing: 1; highlightAlphas: 0.3, 0.02; fillAlphas: 0.66, 0.49, 0.72, 0.77; fillColors: #000000, #006600, #006633, #009999; color: #00cc66; textRollOverColor: #333399; textSelectedColor: #660066; borderColor: #6600cc; themeColor: #6633cc; fontFamily: Arial; fontSize: 12; fontWeight: bold; } 

Button Bar ( Top )

 ButtonBar { buttonHeight: 38; buttonWidth: 100; horizontalGap: 0; textIndent: 0; letterSpacing: 0; buttonStyleName: "mybuttonBarButtonStyle"; firstButtonStyleName: "mybuttonBarFirstButtonStyle"; lastButtonStyleName: "mybuttonBarLastButtonStyle"; } .mybuttonBarButtonStyle { highlightAlphas: 0.3, 0; fillAlphas: 0.5, 0.4, 0.75, 0.65; color: #0b333c; textRollOverColor: #0b333c; textSelectedColor: #0b333c; borderColor: #aab3b3; themeColor: #009dff; fontFamily: Arial; fontSize: 11; fontWeight: normal; } .mybuttonBarFirstButtonStyle { cornerRadius: 4; } .mybuttonBarLastButtonStyle { cornerRadius: 4; } 

LinkBar ( Top )

 LinkBar { borderStyle: solid; borderColor: #d8d8d8; borderThickness: 1; horizontalGap: 8; separatorWidth: 0; letterSpacing: 0; cornerRadius: 5; backgroundAlpha: 1; backgroundColor: #cccccc; separatorColor: #c4cccc; rollOverColor: #aadeff; selectionColor: #7fcdfe; color: #2b333c; textRollOverColor: #2b333c; textSelectedColor: #2b333c; disabledColor: #aab3b3; fontFamily: Arial; fontSize: 11; fontWeight: bold; dropShadowEnabled: true; shadowDistance: 2; shadowDirection: center; dropShadowColor: #000000; } 

LinkButton ( Top )

LinkButton { cornerRadius: 5; paddingLeft: 3; paddingRight: 3; letterSpacing: 0; rollOverColor: #aadeff; selectionColor: #7fcdfe; color: #0b333c; textRollOverColor: #2b333c; textSelectedColor: #2b333c; fontFamily: Arial; fontSize: 11; fontWeight: normal; } 

PopUpButton ( Top )

PopUpButton { cornerRadius: 5; arrowButtonWidth: 24; popUpGap: 0; textIndent: 2; letterSpacing: 0; paddingLeft: 3; paddingRight: 3; paddingTop: 3; paddingBottom: 3; highlightAlphas: 0.3, 0; fillAlphas: 0.51, 0.4, 0.75, 0.65; color: #0b333c; textRollOverColor: #0b333c; textSelectedColor: #0b333c; borderColor: #aab3b3; themeColor: #009dff; } 

ToggleButtonBar ( Top )

 ToggleButtonBar { buttonHeight: 26; buttonWidth: 81; horizontalGap: 0; textIndent: 2; letterSpacing: 0; buttonStyleName: "mytoggleButtonBarButtonStyle"; firstButtonStyleName: "mytoggleButtonBarFirstButtonStyle"; lastButtonStyleName: "mytoggleButtonBarLastButtonStyle"; selectedButtonTextStyleName: "mytoggleButtonBarSelectedButtonStyle"; } .mytoggleButtonBarButtonStyle { highlightAlphas: 0.36, 0; fillAlphas: 0.6, 0.4, 0.75, 0.65; color: #0b333c; textRollOverColor: #0b333c; textSelectedColor: #0b333c; borderColor: #aab3b3; themeColor: #ff0000; fontFamily: Arial; fontSize: 11; fontWeight: normal; } .mytoggleButtonBarFirstButtonStyle { cornerRadius: 5; } .mytoggleButtonBarLastButtonStyle { cornerRadius: 5; } .mytoggleButtonBarSelectedButtonStyle { color: #0b333c; fontFamily: Arial; fontWeight: bold; fontStyle: normal; textDecoration: none; } 

Containers

ApplicationControlBar ( Top )

ApplicationControlBar { highlightAlphas: 0.26, 0; fillAlphas: 0.02, 0; fillColors: #ffffff, #009933; backgroundColor: #ffffff; backgroundAlpha: 0.39; cornerRadius: 5; shadowDistance: 5; shadowDirection: center; dropShadowColor: #000000; } 

HDividedBox ( Top )

HDividedBox { dividerAffordance: 3; dividerAlpha: 0.24; dividerColor: #009933; dividerThickness: 9; } 

VDividedBox ( Top )

VDividedBox { dividerAffordance: 3; dividerAlpha: 0.24; dividerColor: #009933; dividerThickness: 9; } 

Panel ( Top )

Panel { borderStyle: solid; borderColor: #b7babc; borderAlpha: 0.43; borderThickness: 1; roundedBottomCorners: false; cornerRadius: 9; headerHeight: 27; headerColors: #cc3300, #003333; footerColors: #33ff99, #339966; backgroundColor: #ffffff; shadowDistance: 1; titleStyleName: "mypanelTitle"; } .mypanelTitle { letterSpacing: 1; color: #0b333c; textAlign: left; fontFamily: Arial; fontSize: 11; fontWeight: normal; } 

 

Form Elements

CheckBox ( Top )

CheckBox { textIndent: 0; letterSpacing: 0; highlightAlphas: 0.38, 0; fillAlphas: 0.54, 0.4, 0.75, 0.65; fillColors: #ffffff, #cccccc, #ffffff, #eeeeee; borderColor: #b7babc; color: #0b333c; textSelectedColor: #0b333c; textRollOverColor: #0b333c; themeColor: #009dff; fontFamily: Arial; fontSize: 11; fontWeight: normal; } 

ComboBox ( Top )

ComboBox { cornerRadius: 5; color: #0b333c; borderColor: #b7babc; highlightAlphas: 0.36, 0; fillAlphas: 0.63, 0.4, 0.75, 0.65; fillColors: #ffffff, #cccccc, #ffffff, #eeeeee; backgroundAlpha: 1; selectionColor: #7fcdfe; textSelectedColor: #0b333c; useRollOver: true; rollOverColor: #aadeff; textRollOverColor: #0b333c; themeColor: #009dff; alternatingItemColors: #ffffff, #ffff99; openDuration: 303; closeDuration: 291; textAlign: left; fontFamily: Arial; fontSize: 11; fontWeight: normal; letterSpacing: 0; dropDownStyleName: "myComboBoxDropDowns"; } .myComboBoxDropDowns { cornerRadius: 1; borderThickness: 0; borderColor: #919495; color: #0b333c; textAlign: left; fontFamily: Arial; fontSize: 11; fontWeight: bold; fontStyle: normal; textDecoration: none; dropShadowEnabled: true; shadowDirection: center; shadowDistance: 1; dropShadowColor: #000000; } 

DateChooser ( Top )

DateChooser { cornerRadius: 6; borderThickness: 0; headerColors: #e1e5eb, #ffffff; highlightAlphas: 0.28, 0; fillAlphas: 0.6, 0.4, 0.75, 0.65; fillColors: #ffffff, #cccccc, #ffffff, #eeeeee; todayColor: #ff9900; rollOverColor: #aadeff; selectionColor: #009dff; color: #0b333c; borderColor: #aab3b3; backgroundColor: #ffffff; backgroundAlpha: 1; themeColor: #009dff; dropShadowEnabled: true; shadowDistance: 1; shadowDirection: center; dropShadowColor: #000000; fontFamily: Arial; fontSize: 12; fontWeight: normal; } 

NumericStepper ( Top )

NumericStepper { borderStyle: solid; borderColor: #b7babc; borderThickness: 0; backgroundAlpha: 0.89; cornerRadius: 0; textIndent: 0; letterSpacing: 0; highlightAlphas: 0.34, 0; fillAlphas: 0.6, 0.4, 0.75, 0.65; fillColors: #ffffff, #cccccc, #ffffff, #eeeeee; backgroundColor: #ffffff; color: #0b333c; themeColor: #009dff; fontFamily: Arial; fontSize: 11; fontWeight: normal; } 

RadioButton ( Top )

RadioButton { textIndent: 0; letterSpacing: 0; highlightAlphas: 0.24, 0; fillAlphas: 0.66, 0.4, 0.75, 0.65; fillColors: #ffffff, #cccccc, #ffffff, #eeeeee; borderColor: #b7babc; color: #0b333c; textSelectedColor: #0b333c; textRollOverColor: #0b333c; themeColor: #009dff; fontFamily: Arial; fontSize: 11; fontWeight: normal; fontStyle: italic; textDecoration: underline; } 

TextArea ( Top )

 TextArea { fontFamily: Arial; fontSize: 11; color: #0b333c; fontWeight: bold; fontStyle: italic; textDecoration: underline; textAlign: left; paddingLeft: 7; paddingRight: 4; leading: 2; textIndent: 0; letterSpacing: 1; backgroundAlpha: 1; backgroundColor: #ffffff; borderStyle: solid; borderColor: #b7babc; borderThickness: 1; cornerRadius: 1; dropShadowColor: #000000; dropShadowEnabled: true; shadowDistance: 3; } 

TextInput ( Top )

TextInput { borderStyle: solid; borderColor: #b7babc; borderThickness: 1; cornerRadius: 5; backgroundAlpha: 0.98; backgroundColor: #ffffff; color: #0b333c; textAlign: left; letterSpacing: 0; paddingLeft: 3; paddingRight: 2; fontFamily: Arial; fontSize: 11; fontWeight: bold; dropShadowEnabled: true; shadowDirection: center; shadowDistance: 1; } 


Lists

List ( Top )

List { backgroundAlpha: 0.98; backgroundColor: #ffffff; alternatingItemColors: #ffffff, #ffff99; useRollOver: true; rollOverColor: #aadeff; textRollOverColor: #0b333c; borderStyle: solid; borderThickness: 2; borderColor: #b7babc; selectionColor: #7fcdfe; color: #0b333c; textSelectedColor: #0b333c; textIndent: 2; letterSpacing: 0; selectionDuration: 653; dropShadowEnabled: true; shadowDistance: 2; dropShadowColor: #000000; fontFamily: Arial; fontSize: 11; fontWeight: bold; cornerRadius: 10; textAlign: left; }

Tree ( Top )

Tree { backgroundAlpha: 0.98; backgroundColor: #ffffff; alternatingItemColors: #ffffff, #ffff99; depthColors: #ffffff, #ffffff, #ffffff, #ffffff; useRollOver: true; rollOverColor: #aadeff; textRollOverColor: #2b333c; borderStyle: solid; borderThickness: 1; borderColor: #b7babc; selectionColor: #7fceff; color: #2b333c; textSelectedColor: #2b333c; textIndent: 0; letterSpacing: 0; indentation: 14; selectionDuration: 375; fontFamily: Arial; fontSize: 11; fontWeight: normal; cornerRadius: 0; }

 

Navigators

TabNavigator ( Top )

TabNavigator { tabHeight: 28; tabWidth: 112; cornerRadius: 0; horizontalGap: 5; horizontalAlign: left; paddingLeft: 5; paddingRight: 0; textIndent: 0; backgroundAlpha: 1; backgroundColor: #ffffff; borderStyle: solid; borderColor: #aab3b3; borderThickness: 0; color: #0b333c; dropShadowEnabled: false; tabStyleName: "myTabs"; firstTabStyleName: "myTabs"; lastTabStyleName: "myTabs"; selectedTabTextStyleName: "mySelectedTabs"; } .myTabs { cornerRadius: 7; highlightAlphas: 0.4, 0; letterSpacing: 0; fillAlphas: 0.68, 0.4; fillColors: #ffffff, #cccccc; backgroundAlpha: 1; backgroundColor: #ffffff; color: #0b333c; textRollOverColor: #0b333c; themeColor: #009dff; textAlign: center; fontFamily: Arial; fontWeight: bold; } .mySelectedTabs { color: #0b333c; textRollOverColor: #3300ff; textAlign: center; fontFamily: Arial; fontSize: 11; fontWeight: bold; } }

 

HRule ( Top )

HRule { strokeColor: #ededed; shadowColor: #d8d8d8; strokeWidth: 1; } 

VRule ( Top )

VRule { strokeColor: #ededed; shadowColor: #d8d8d8; strokeWidth: 1; } 

 

SCrollbars

Scrollbar – Horizontal ( Top )

HScrollBar { cornerRadius: 4; highlightAlphas: 0.4, 0.02; fillAlphas: 0.7, 0.5, 0.8, 0.7; fillColors: #d8d8d8, #cccccc, #ffffff, #eeeeee; trackColors: #a4a4a4, #e7e7e7; themeColor: #c4fdea; borderColor: #a4a4a4; } 

Scrollbar – Vertical ( Top )

VScrollBar { cornerRadius: 4; highlightAlphas: 0.4, 0.02; fillAlphas: 0.7, 0.5, 0.8, 0.7; fillColors: #d8d8d8, #cccccc, #ffffff, #eeeeee; trackColors: #a4a4a4, #e7e7e7; themeColor: #c4fdea; borderColor: #a4a4a4; } 

Sliders


Other

ColorPicker ( Top )

ColorPicker { closeDuration: 256; columnCount: 20; horizontalGap: 0; openDuration: 247; paddingTop: 5; paddingBottom: 5; paddingLeft: 5; paddingRight: 5; previewHeight: 20; previewWidth: 50; swatchBorderColor: #000000; swatchBorderSize: 1; swatchGridBackgroundColor: #000000; swatchGridBorderSize: 0; swatchHeight: 12; swatchHighlightColor: #ffffff; swatchHighlightSize: 1; swatchWidth: 12; textFieldWidth: 72; verticalGap: 0; }

DataGrid ( Top )

DataGrid { backgroundAlpha: 0.92; backgroundColor: #ffffff; alternatingItemColors: #ffffff, #ffffcc; headerColors: #e6eeee, #ffffff; horizontalGridLines: true; letterSpacing: 0; horizontalGridLineColor: #cccccc; verticalGridLineColor: #cccccc; useRollOver: true; rollOverColor: #aadeff; textRollOverColor: #0b333c; borderThickness: 2; borderColor: #b7babc; selectionColor: #7fcdfe; color: #0b333c; textSelectedColor: #0b333c; textIndent: 0; dropShadowEnabled: false; fontFamily: Arial; fontWeight: normal; headerStyleName: "mydataGridHeaderStyle"; } .mydataGridHeaderStyle { color: #0b333c; fontFamily: Arial; fontWeight: normal; fontStyle: normal; textDecoration: none; }

MenuBar ( Top )

MenuBar { cornerRadius: 3; letterSpacing: 0; backgroundAlpha: 1; backgroundColor: #ffffff; borderColor: #b7babc; highlightAlphas: 0.36, 0; fillAlphas: 0.6, 0.4; fillColors: #e6eeee, #ffffcc; rollOverColor: #aadeff; selectionColor: #7fcdfe; color: #0b333c; textRollOverColor: #0b333c; textSelectedColor: #0b333c; disabledColor: #aab3b3; themeColor: #009dff; fontFamily: Arial; fontWeight: bold; textAlign: left; textIndent: 0; } 

ProgressBar ( Top )

ProgressBar { borderColor: #2b333c; barColor: #009dff; trackColors: #e6eeee, #e6eeee; color: #0b333c; paddingLeft: 5; paddingRight: 5; textIndent: 3; letterSpacing: 0; trackHeight: 10; verticalGap: 0; fontFamily: Arial; }

ToolTip ( Top )

ToolTip { backgroundAlpha: 1; cornerRadius: 6; paddingLeft: 0; backgroundColor: #ffffcc; color: #0b333c; textAlign: left; fontFamily: Arial; } 

HSlider ( Top )

HSlider { labelOffset: -1; thumbOffset: 0; dataTipOffset: -1; tickOffset: -1; tickLength: 5; tickThickness: 0; tickColor: #3366cc; showTrackHighlight: true; invertThumbDirection: true; borderColor: #919999; trackColors: #ffffff, #ffff99; themeColor: #009dff; fillAlphas: 0.72, 0.4, 0.75, 0.65; fillColors: #ffffff, #cccccc, #ffffff, #eeeeee; labelStyleName: "myhSliderLabelStyle"; } .myhSliderLabelStyle { letterSpacing: 0; color: #0b333c; fontFamily: Arial; fontSize: 11; }

VSlider ( Top )

VSlider { labelOffset: -1; thumbOffset: 0; dataTipOffset: -1; tickOffset: -1; tickLength: 5; tickThickness: 0; tickColor: #3366cc; showTrackHighlight: true; invertThumbDirection: true; borderColor: #919999; trackColors: #ffffff, #ffff99; themeColor: #009dff; fillAlphas: 0.72, 0.4, 0.75, 0.65; fillColors: #ffffff, #cccccc, #ffffff, #eeeeee; labelStyleName: "myvSliderLabelStyle"; } .myvSliderLabelStyle { letterSpacing: 0; color: #0b333c; fontFamily: Arial; fontSize: 11; }
The following two tabs change content below.
Hi. I'm Vince, a web guy based in Tampa, Florida. I've been building web sites since 1996, and I have great passion for design and usability. I have a wonderful family and 2 great dogs. Feel free to say "Hi", and checkout my latest e-books.

Latest posts by Vince (see all)

Leave a Reply


+ 4 = five