Styling individual FormItem labels using the labelStyleName style in Flex 3
Problem
You want to style individual form item labels in a Flex 3 form.
Solution
The following example shows you how you can style individual labels in a FormItem container in Flex by setting the labelStyleName style.
Detailed explanation
The following snippet shows you how you can override the label style for a FormItem container by setting the labelStyleName style:
<mx:Style>
.requiredLabel {
color: red;
fontSize: 12;
fontWeight: bold;
}
</mx:Style>
<mx:Form>
<mx:FormItem label="Field 1:"
labelStyleName="requiredLabel"
required="true">
<mx:Label id="lbl1" text="{str}" />
</mx:FormItem>
</mx:Form>
The following example shows how you can set a default form item label style by setting the labelStyleName style in an <mx:Style /> block and then overriding individual styles by setting the labelStyleName style within certain <mx:FormItem /> containers:
<mx:Style>
FormItem {
labelStyleName: defaultLabel;
}
.defaultLabel {
color: black;
fontSize: 10;
fontStyle: italic;
fontWeight: normal;
}
.requiredLabel {
color: red;
fontSize: 12;
fontWeight: bold;
}
</mx:Style><mx:String id="str">The quick brown fox jumped over the lazy dog.</mx:String>
<mx:Form>
<mx:FormHeading label="Some form heading!" />
<!-- override the default labelStyleName for the FormItem -->
<mx:FormItem label="Field 1:"
labelStyleName="requiredLabel"
required="true">
<mx:Label id="lbl1" text="{str}" />
</mx:FormItem>
<!-- override the default labelStyleName for the FormItem -->
<mx:FormItem label="Field 2:"
labelStyleName="requiredLabel"
required="true">
<mx:Label id="lbl2" text="{str}" />
</mx:FormItem>
<!-- default -->
<mx:FormItem label="Field 3:">
<mx:Label id="lbl3" text="{str}" />
</mx:FormItem>
<!-- default -->
<mx:FormItem label="Field 4:">
<mx:Label id="lbl4" text="{str}" />
</mx:FormItem>
</mx:Form>
For more information, see http://blog.flexexamples.com/2007/11/13/styling-individual-formitem-labels-using-the-labelstylename-style/.
