Customize the Validation Password widget



Although the Property inspector enables you to make simple edits to a Validation Password widget, it does not support customized styling tasks. You can alter the CSS for the Validation Password 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_sprypassword_custom_en.

All CSS rules in the topics below refer to the default rules located in the SpryValidationPassword.css file. Dreamweaver saves the SpryValidationPassword.css file in the SpryAssets folder of your site whenever you create a Spry Validation Password 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 Password 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 a Validation Password widget (general instructions)

  1. Open the SpryValidationPassword.css file.

  2. Locate the CSS rule for the part of the widget to change. For example, to change the background color of the Password widget’s required state, edit the input.passwordRequiredState rule in the SpryValidationPassword.css file.

  3. Make your changes to the CSS and save the file.

The SpryValidationPassword.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 Password widget error message text

By default, error messages for the Validation Password widget appear in red with a 1-pixel solid border surrounding the text.

 To change the text styling of Validation Password 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

.passwordRequiredState .passwordRequiredMsg, .passwordMinCharsState .passwordMinCharsMsg, .passwordMaxCharsState .passwordMaxCharsMsg, .passwordInvalidStrengthState .passwordInvalidStrengthMsg, .passwordCustomState .passwordCustomMsg

color: #CC3333; border: 1px solid #CC3333;

Change Validation Password widget background colors

 To change the background colors of the Validation Password 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

.passwordValidState input, input.passwordValidState

background-color: #B8F5B1;

Background color of widget in invalid state

input.passwordRequiredState, .passwordRequiredState input, input.passwordInvalidStrengthState, .passwordInvalidStrengthState input, input.passwordMinCharsState, .passwordMinCharsState input, input.passwordCustomState, .passwordCustomState input, input.passwordMaxCharsState, .passwordMaxCharsState input

background-color: #FF9F9F;

Background color of widget in focus

.passwordFocusState input, input.passwordFocusState

background-color: #FFFFCC;