Customize the Validation Select widget
The SpryValidationSelect.css file provides the default styling for the Validation Select widget. You can, however, customize the widget by changing the appropriate CSS rule. The CSS rules in the SpryValidationSelect.css file use the same class names as the related elements in the widget’s HTML code, so it’s easy for you to know which CSS rules correspond to the widget and its error states.
The SpryValidationSelect.css file should already be included in your website before you start customizing. For more information, see Prepare your files.
Style a Validation Select widget (general instructions)
- Open the SpryValidationSelect.css file.
- Locate the CSS rule for the part of the widget to change. For example, to change the background color of the Select widget’s required state, edit the .selectRequiredState rule in the SpryValidationSelect.css file.
- Make your changes to the CSS rule and save the file.
The SpryValidationSelect.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 Select widget error message text
By default, error messages for the Validation Select widget appear in red with a 1-pixel solid border surrounding the text.
To change the text styling of Validation Select
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 style |
Relevant CSS rule |
Relevant properties to change |
|---|---|---|
|
Error message text |
.selectRequiredState .selectRequiredMsg, .selectInvalidState .selectInvalidMsg |
color: #CC3333; border: 1px solid #CC3333; |
Change Validation Select widget background colors
To change the background colors of the Validation
Select widget in various states, use the following table to locate
the appropriate CSS rule, and then change the default background
color values.
|
Background color to change |
Relevant CSS rule |
Relevant property to change |
|---|---|---|
|
Background color of widget in valid state |
.selectValidState select, select.selectValidState |
background-color: #B8F5B1; |
|
Background color of widget in invalid state |
select.selectRequiredState, .selectRequiredState select, select.selectInvalidState, .selectInvalidState select |
background-color: #FF9F9F; |
|
Background color of widget in focus |
.selectFocusState select, select.selectFocusState |
background-color: #FFFFCC; |
Customize state-related class names
While you can replace error message-related class names with class names of your own by changing the rules in the 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:
<script type="text/javascript">
var selectwidget1 = new Spry.Widget.ValidationSelect("spryselect1", {requiredClass:"required"});
</script>
The following table provides a list of options you can use to override built-in state-related class names.
|
Option |
Description |
|---|---|
|
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 |