Customize Validation Checkbox widget error messages

By default, error messages for the Validation Checkbox widget appear in red with a 1-pixel border surrounding the text. You can alter the CSS for the Validation Checkbox 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_sprycheckbox_custom.

  1. Open the SpryValidationCheckbox.css file.

    Dreamweaver saves the SpryValidationCheckbox.css file in the SpryAssets folder of your site whenever you create a Spry Validation Checkbox widget. It’s helpful to consult this file because it contains commented information about various styles that apply to the widget.

  2. 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 style

    Relevant CSS rule

    Relevant properties to change

    Error message text

    .checkboxRequiredState .checkboxRequiredMsg, .checkboxMinSelectionsState .checkboxMinSelectionsMsg, .checkboxMaxSelectionsState .checkboxMaxSelectionsMsg

    color: #CC3333; border: 1px solid #CC3333;
    Although you can easily edit rules for the Validation Checkbox 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.