CA Service Management

The text field attribute options appear as per below. 

I'm particularly interested in CSS Class and Style. 

Not sure what they do, are there any out of the box examples of these attributes?

I don't know what the syntax would be?

The CA help site is not very informative either. 

CSS Class
Specifies a space-separated list of CSS classes. This class is associated with style information

Style

Specifies associated style information.

Good Morning James.
 
This is Louis van Amelsfort and I will provide some information for you on this subject.
 
I found the following information/explanation regarding your question that you raised in here.
Tecdoc: https://www.ca.com/us/services-support/ca-support/ca-support-online/knowledge-base-articles.tec1140777.html
 
You access the Form Designer by selecting Catalog, Forms>Forms.
The main components of the Form Designer are the
1 Component Tree (the left pane),
2 Preview Area   (the middle pane) and
3 Item Inspector (the right pane).
 
In the 'Item Inspector' for each component of the form, some of the attributes are 'Style' and 'CSS class'.
 
CSS class
 Specifies a space-separated list of classes.
 The class is associated with style information.
Style
 Specifies associated style information.
 
- There is no specific documentation available within our products.
- Basically these attributes, should work like normal html elements.
- Which means, on runtime, an html element is formed with all the details provided in the attribute(s).
- So, normal whatever an html input or element takes, this will also show working like that.
- Please check on 'general html' attributes to be set and used.
 
The following goes for the complete SC environment. Not only for one particular form.
For improving the visibility of fields you can follow this customization.
You can add the following code in %USM_HOME%\view\webapps\usm\gwt\fdBase\css\formdesigner.css file following customization steps.
x-item-disabled {
  opacity: 1 !important;
  color: #000000 !important;
  filter: alpha(opacity=100) !important;
  CURSOR: defaults !important;
  font-weight:bold  !important;
}
.x-item-disabled * {
  color: black !important;
  opacity: 0.8 !important;
  font-weight:bold  !important;
  filter: alpha(opacity=100); CURSOR: defaults;
}
 
Below is one example how you can use style value is below.
color:red;
fontWeight:bold;
fontStyle:italic;
fontFamiliy:Arial;
fontSize:20px;
textAlign:center
 
To define the class attribute, they need define in formdesigner.css file
Example to define a css class in formdesigner.css
 .foo {
     font-weight: bold;
 }
 
Using 'foo' as class name in class attribute.
You can define any css class and use it in class attribute.
 
Here is the simple example how you can use the class attribute.
Please edit the fordesigner.css file
%usm_home%\view\webapps\usm\gwt\fdBase\css and add the below definition at the bottom of the file.
 
 .testabc {
   font-weight: bold;
 }
 
Create a test field in the form and specify the class attribute value as testabc.
Please clear the browser cache and verify whether the class has effected or not.
..
You can change form elements font, color, Style specifying them on STYLE name or property of it. 
As example: 
1) create a form
2) add the text field.
3) add the following value to style attribute as
color:red;fontWeight:bold;fontStyle:italic;fontFamiliy:Arial;fontSize:20px;textAlign:center
..
Currently no capability to set the width of text field in style.
Possible style settings that can be set:
color:red; fontWeight:bold; fontStyle:italic; fontFamiliy:Arial;fontSize:20px; textAlign:center
And possibly 'other'(not all) html-like settings for the characters in the field.
 
Please check on the above information and let me know when this answers your questions on this subject?
Thanks in advance and kind regards, Louis.

Thanks Louis, this is extremely helpful