Customize the Validation Text Field widget
Although the Property inspector enables you to make simple edits to a Validation Text Field widget, it does not support customized styling tasks. You can alter the CSS for the Validation Text Field widget so that you can create a widget that is styled to your liking. For a more advanced list of styling tasks, see www.adobe.com/go/learn_dw_sprytextfield_custom.
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.
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 |
Relevant properties to change |
|---|---|---|
|
Error message text |
.textfieldRequiredState .textfieldRequiredMsg, .textfieldInvalidFormatState .textfieldInvalidFormatMsg, .textfieldMinValueState .textfieldMinValueMsg, .textfieldMaxValueState .textfieldMaxValueMsg, .textfieldMinCharsState .textfieldMinCharsMsg, .textfieldMaxCharsState .textfieldMaxCharsMsg |
color: #CC3333; border: 1px solid #CC3333; |
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 |
Relevant property to change |
|---|---|---|
|
Background color of widget in valid state |
.textfieldValidState input, input.textfieldValidState |
background-color: #B8F5B1; |
|
Background color of widget in invalid state |
input.textfieldRequiredState, .textfieldRequiredState input, input.textfieldInvalidFormatState, .textfieldInvalidFormatState input, input.textfieldMinValueState, .textfieldMinValueState input, input.textfieldMaxValueState, .textfieldMaxValueState input, input.textfieldMinCharsState, .textfieldMinCharsState input, input.textfieldMaxCharsState, .textfieldMaxCharsState input |
background-color: #FF9F9F; |
|
Background color widget in focus |
.textfieldFocusState input, input.textfieldFocusState |
background-color: #FFFFCC; |