Spry User Guide - Support - Adobe

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
.selectValidState select,
select.selectValidState
select.selectRequiredState, .selectRequiredState
select, select.select-
InvalidState, .selectInvalidState
select
Background color of widget in focus .selectFocusState select,
select.selectFocusState
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 spryselect1 = new Spry.Widget.ValidationSelect("spryselect1",
{requiredClass:"required"});
The following table provides a list of options you can use to override built-in state-related class names.
Option Description
background-color: #B8F5B1;
background-color: #FF9F9F;
background-color: #FFFFCC;
requiredClass Overrides the "selectRequiredState" built-in value
validClass Overrides the "selectValidState" built-in value
focusClass Overrides the "selectFocusState" built-in value
invalidClass Overrides the "selectInvalidState" built-in value
Working with the Validation Checkbox widget
SPRY
User Guide
Validation Checkbox widget overview and structure
ASpryValidationCheckboxwidgetisacheckboxorgroupofcheckboxesinanHTMLcodeformthatdisplayvalid
or invalid states when the user selects or fails to select a checkbox. For example, you can add a Validation Checkbox
widget to a form in which a user might be required to make three selections. If the user fails to make all three selections,
the widget returns a message stating that the minimum number of selections was not met.
The following example shows a Validation Checkbox widget in various states.
83