5 Replies Latest reply on Mar 18, 2011 2:24 PM by rtalton

    How to style form labels?

    cut-copy-paste Level 1

      I'm using a (mx) form and I see absolutely no way to style the labels for the fields.  Is this for real? There has got to be a way...

        • 1. Re: How to style form labels?
          Raghuvasa Level 1

          We can override the styles by using external css file

          • 2. Re: How to style form labels?
            cut-copy-paste Level 1

            Can I style only the labels with CSS?

            I have applied styles to the formItems and it affects everything so I have to reset styles of everything else in the form which is not ideal.

            • 3. Re: How to style form labels?
              Angela's ARIA

              Hi cut-copy-paste,

               

              If you have a form similar to this:

                   <mx:Form>

                        <mx:FormItem label="Name :"                          styleName="formTitle">

                             <mx:TextInput id="senderName" />

                                   </mx:FormItem>

                        <mx:FormItem label="Email :"                          styleName="formLabel">

                             <mx:TextInput id="senderEmail" />

                        </mx:FormItem>

                   </mx:Form>

               

              You can link to a style sheet:

                   <fx:Style source="content-text-style.css"/>

               

              Where you can apply styles to the form components by naming them or naming classes that are applied to the components:

                   @namespace mx "library://ns.adobe.com/flex/mx";

                   mx|FormItem { fontSize: 10; }

                   mx|TextInput { fontSize: 12; }

                   mx|Button { fontSize: 12; }

               

                   .formTitle { fontSize: 20; }

                   .formLabel { fontSize: 12; }

               

              As the mx:TextInput component is placed within the mx:FormItem component  this may cause the style to be inherited.  Try specifying the styles  you want to apply to the mx:TextInput also.

               

              I hope that you find this helpful.

               

              Angela's ARIA
              Accessible Rich Internet Application

              • 4. Re: How to style form labels?
                cut-copy-paste Level 1

                I was aware you could use class names etc, yeah.

                 

                I guess basically the answer is that you can't style the labels independently of the things that they contain, which is too bad.

                • 5. Re: How to style form labels?
                  rtalton Level 4

                  You were sooo close!

                  On your FormItem, simply set the "labelStyleName" property, NOT the "styleName".

                   

                  /* CSS file */

                   

                  Label.frmItemLabelSyle

                  {

                   

                   

                  color: #FF4800;

                   

                  fontSize: 12;

                  }

                   

                  <?xml version="1.0" encoding="utf-8"?>

                  <mx:Application

                   

                  xmlns:mx="http://www.adobe.com/2006/mxml"

                  layout="

                  absolute">

                   

                   

                  <mx:Form

                  width="

                  300"

                  height="

                  100"

                  y="

                  50"

                  x="

                  50">

                   

                   

                  <mx:FormItem

                  label="

                  First Name"

                  labelStyleName="

                  frmItemLabelSyle">

                   

                   

                  <mx:TextInput/>

                   

                  </mx:FormItem>

                   

                  </mx:Form>

                   

                   

                  <mx:Style source="styles.css"/>

                  </mx:Application>