Spry User Guide - Support - Adobe

2 Locate the CSS rule for the part of the widget to change. For example, to change the background color of the Text
Area widget’s required state, edit the textareaRequiredState rule in the SpryValidationTextarea.css file.
3 Make your changes to the CSS rule and save the file.
The SpryValidationTextarea.css file contains extensive comments, explaining the code and the purpose for certain
rules. For further information, see the comments in the file.
Style Validation Text Area widget error message text
By default, error messages for the Validation Text Area widget appear in red with a 1-pixel solid border surrounding
the text.
❖ To change the text styling of Validation Text Area widget error messages, use the following table to locate the
appropriate CSS rule, and then change the default properties, or add your own text styling properties and values.
Text to change Relevant CSS rule Relevant properties to change
Error message text .textareaRequiredState .textareaRequiredMsg,
.textareaMinCharsState
.textareaMinCharsMsg, .textareaMaxCharsState
.textareaMax-
CharsMsg
color: #CC3333; border: 1px solid
#CC3333;
Change Validation Text Area widget background colors
❖ To change the background colors of the Validation Text Area widget in various states, use the following table to
locate the appropriate CSS rule, and then change the default background color values.
Background color to change Relevant CSS rule Relevant property to change
Background color of widget in valid
state
Background color of widget in
invalid state
.textareaValidState textarea,
textarea.textareaValidState
textarea.textareaRequiredState,
.textareaRequiredState textarea,
textarea.textareaMinCharsState,
.textareaMinCharsState textarea,
textarea.textareaMaxCharsState,
.textareaMaxCharsState textarea
Background color of widget in focus .textareaFocusState textarea,
textarea.textareaFocusState
background-color: #B8F5B1;
background-color: #FF9F9F;
background-color: #FFFFCC;
Customize state-related class names
Whileyoucanreplaceerrormessage-relatedclassnameswithclassnamesofyourownbychangingtherulesinthe
CSS and the class names in the HTML code, you cannot change or replace state-related class names, because the
behaviors are hard-coded as part of the Spry framework. You can, however, override the default state-related class
name with your own class name by specifying a new value in the third parameter of the widget constructor.
❖ To change widget state-related class names, add one of the overriding options to the third parameter of the widget
constructor, and specify your custom class name, as follows:
var sprytextarea1 = new Spry.Widget.ValidationTextarea("sprytextarea1",
{requiredClass:"required"});
The following table provides a list of options you can use to override built-in state-related class names.
SPRY
User Guide
74