Adobe 38040334 - Dreamweaver CS3 User Manual page 475

All CSS rules in the topics below refer to the default rules located in the SpryValidationTextField.css file.
Dreamweaver saves the SpryValidationTextField.css file in the SpryAssets folder of your site whenever you create a
Spry Validation Text Field widget. Consulting this file is helpful because it contains commented information about
various styles that apply to the widget.
Although you can easily edit rules for the Validation Text Field widget directly in the accompanying CSS file, you can
also use the CSS Styles panel to edit the widget's CSS. The CSS Styles panel is helpful for locating the CSS classes
assigned to different parts of the widget, especially if you use the panel's Current mode.
See also
"The CSS Styles panel in Current mode" on page 125
Style Validation Text Field widget error message text
By default, error messages for the Validation Text Field widget appear in red with a 1-pixel border surrounding the text.
❖
To change the text styling of Validation Text Field 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
Error message text .textfieldRequiredState .textfieldRequiredMsg, .textfield-
InvalidFormatState .textfieldInvalidFormatMsg, .text-
fieldMinValueState .textfieldMinValueMsg, .textfield-
MaxValueState .textfieldMaxValueMsg,
.textfieldMinCharsState .textfieldMinCharsMsg, .text-
fieldMaxCharsState .textfieldMaxCharsMsg
Change Validation Text Field widget background colors
❖
To change the background colors of the Validation Text Field widget in various states, use the following table to
locate the appropriate CSS rule, and then change the default background color values:
Color to change Relevant CSS rule
Background color of .textfieldValidState input, input.textfieldValidState
widget in valid state
Background color of input.textfieldRequiredState, .textfieldRequiredState
widget in invalid state input, input.textfieldInvalidFormatState, .textfieldIn-
validFormatState input, input.textfieldMinVal-
ueState, .textfieldMinValueState input, input.text-
fieldMaxValueState, .textfieldMaxValueState input,
input.textfieldMinCharsState, .textfieldMin-
CharsState input, input.textfieldMaxCharsState,
.textfieldMaxCharsState input
Background color widget .textfieldFocusState input, input.textfieldFocusState
in focus
Relevant properties to change
color: #CC3333; border: 1px solid
#CC3333;
Relevant property to change
background-color: #B8F5B1;
background-color: #FF9F9F;
background-color: #FFFFCC;
September 4, 2007
DREAMWEAVER CS3 468
User Guide