Thanks but none of those options seem to be working. This is the generated code:
/* Spry formats */
form.Basic_Default .textfieldRequiredState .textfieldRequiredMsg,
form.Basic_Default .textfieldInvalidFormatState .textfieldInvalidFormatMsg,
form.Basic_Default .textfieldMinValueState .textfieldMinValueMsg,
form.Basic_Default .textfieldMaxValueState .textfieldMaxValueMsg,
form.Basic_Default .textfieldMinCharsState .textfieldMinCharsMsg,
form.Basic_Default .textfieldMaxCharsState .textfieldMaxCharsMsg {
color:#b40000;
white-space:nowrap;
}
form.Basic_Default .checkboxRequiredState .checkboxRequiredMsg,
form.Basic_Default .checkboxMinSelectionsState .checkboxMinSelectionsMsg,
form.Basic_Default .checkboxMaxSelectionsState .checkboxMaxSelectionsMsg {
color:#b40000;
white-space:nowrap;
}
form.Basic_Default .selectRequiredState .selectRequiredMsg,
form.Basic_Default .selectInvalidState .selectInvalidMsg {
color:#b40000;
white-space:nowrap;
}
form.Basic_Default .textareaRequiredState .textareaRequiredMsg,
form.Basic_Default .textareaMinCharsState .textareaMinCharsMsg,
form.Basic_Default .textareaMaxCharsState .textareaMaxCharsMsg {
color:#b40000;
white-space:nowrap;
}
form.Basic_Default .radioRequiredState .radioRequiredMsg,
form.Basic_Default .radioInvalidState .radioInvalidMsg {
color:#b40000;
white-space:nowrap;
}
form.Basic_Default .passwordRequiredState .passwordRequiredMsg,
form.Basic_Default .passwordMinCharsState .passwordMinCharsMsg,
form.Basic_Default .passwordMaxCharsState .passwordMaxCharsMsg,
form.Basic_Default .passwordInvalidStrengthState .passwordInvalidStrengthMsg,
form.Basic_Default .passwordCustomState .passwordCustomMsg {
color:#b40000;
white-space:nowrap;
}
form.Basic_Default .confirmRequiredState .confirmRequiredMsg,
form.Basic_Default .confirmInvalidState .confirmInvalidMsg {
color:#b40000;
white-space:nowrap;
}
/* The next three group selectors control the way the core element (TEXTAREA) looks like when the widget is in one of the states: * focus, required / minChars / maxChars , valid
* There are two selectors for each state, to cover the two main usecases for the widget:
* - the widget id is placed on the top level container for the TEXTAREA
* - the widget id is placed on the TEXTAREA element itself (there are no error messages)
*/
/* When the widget is in the valid state the TEXTAREA has a green background applied on it. */
form.Basic_Default .textareaValidState textarea, textarea.textareaValidState {
background-color:#B8F5B1;
}
/* When the widget has received focus, the TEXTAREA has a yellow background applied on it. */
form.Basic_Default .textareaFocusState textarea, textarea.textareaFocusState {
background-color:#FFFFCC;
}
/* This class applies only for a short period of time and changes the way the text in the textarea looks like.
* It applies only when the widget has enforce max chars enabled and the user tries to type some more.
*/
form.Basic_Default .textareaFlashState textarea, textarea.textareaFlashState{
color: #ff0000;
}
/* When the widget has the hint message on, the hint text can be styled differently than the user typed text. */
form.Basic_Default textarea.textareaHintState, .textareaHintState textarea{
color: #Ff0000;
}
/* The next three group selectors control the way the core element (INPUT) looks like when the widget is in one of the states: * focus, required / invalid / minValue / maxValue / minChars / maxChars , valid
* There are two selectors for each state, to cover the two main usecases for the widget:
* - the widget id is placed on the top level container for the INPUT
* - the widget id is placed on the INPUT element itself (there are no error messages)
*/
/* When the widget is in the valid state the INPUT has a green background applied on it. */
form.Basic_Default .textfieldValidState input, input.textfieldValidState {
background-color:#B8F5B1;
}
/* When the widget is in an invalid state the INPUT has a red background applied on it. */
form.Basic_Default input.textfieldRequiredState, .textfieldRequiredState input,
form.Basic_Default input.textfieldInvalidFormatState, .textfieldInvalidFormatState input,
form.Basic_Default input.textfieldMinValueState, .textfieldMinValueState input,
form.Basic_Default input.textfieldMaxValueState, .textfieldMaxValueState input,
form.Basic_Default input.textfieldMinCharsState, .textfieldMinCharsState input,
form.Basic_Default input.textfieldMaxCharsState, .textfieldMaxCharsState input {
background-color:#FF9F9F;
}
/* When the widget has received focus, the INPUT has a yellow background applied on it. */
form.Basic_Default .textfieldFocusState input, input.textfieldFocusState {
background-color:#FFFFCC;
}
/* This class applies only for a short period of time and changes the way the text in the textbox looks like.
* It applies only when the widget has character masking enabled and the user tries to type in an invalid character.
*/
form.Basic_Default .textfieldFlashText input, input.textfieldFlashText {
color: #ff0000;
}
/* When the widget has the hint message on, the hint text can be styled differently than the user typed text. */
form.Basic_Default .textfieldHintState input, input.textfieldHintState {
color: #ff0000;
}
/* select */
/* The next three group selectors control the way the core element (SELECT) looks like when the widget is in one of the states:
* focus, required / invalid, valid
* There are two selectors for each state, to cover the two main usecases for the widget:
* - the widget id is placed on the top level container for the SELECT
* - the widget id is placed on the SELECT element itself (there are no error messages)
*/
/* When the widget is in the valid state the SELECT has a green background applied on it. */
form.Basic_Default .selectValidState select, select.selectValidState {
background-color:#B8F5B1;
}
/* When the widget is in an invalid state the SELECT has a red background applied on it. */
form.Basic_Default select.selectRequiredState, .selectRequiredState select,
form.Basic_Default select.selectInvalidState, .selectInvalidState select {
background-color:#FF9F9F;
}
/* When the widget has received focus, the SELECT has a yellow background applied on it. */
form.Basic_Default .selectFocusState select, select.selectFocusState {
background-color:#FFFFCC;
}
/* Password */
form.Basic_Default .passwordRequiredState .passwordRequiredMsg,
form.Basic_Default .passwordMinCharsState .passwordMinCharsMsg,
form.Basic_Default .passwordMaxCharsState .passwordMaxCharsMsg,
form.Basic_Default .passwordInvalidStrengthState .passwordInvalidStrengthMsg,
form.Basic_Default .passwordCustomState .passwordCustomMsg
{
display: inline;
color: #CC3333;
border: 1px solid #CC3333;
}
/* The next three group selectors control the way the core element (INPUT) looks like when the widget is in one of the states: * focus, required / invalid Strength / minValue / maxValue / custom invalid , valid
* There are two selectors for each state, to cover the two main usecases for the widget:
* - the widget id is placed on the top level container for the INPUT
* - the widget id is placed on the INPUT element itself (there are no error messages)
*/
/* When the widget is in the valid state the INPUT has a green background applied on it. */
form.Basic_Default .passwordValidState input, input.passwordValidState {
background-color:#B8F5B1;
}
/* When the widget has received focus, the INPUT has a yellow background applied on it. */
form.Basic_Default .passwordFocusState input, input.passwordFocusState {
background-color:#FFFFCC;
}
/* confirm */
/* The next three group selectors control the way the core element (INPUT) looks like when the widget is in one of the states: * focus, required , invalid , valid
* There are two selectors for each state, to cover the two main usecases for the widget:
* - the widget id is placed on the top level container for the INPUT
* - the widget id is placed on the INPUT element itself (there are no error messages)
*/
/* When the widget is in the valid state the INPUT has a green background applied on it. */
form.Basic_Default .confirmValidState input, input.confirmValidState {
background-color:#B8F5B1;
}
/* When the widget is in an invalid state the INPUT has a red background applied on it. */
form.Basic_Default input.confirmRequiredState, .confirmRequiredState input,
form.Basic_Default input.confirmInvalidState, .confirmInvalidState input
{
background-color:#FF9F9F;
}
/* When the widget has received focus, the INPUT has a yellow background applied on it. */
form.Basic_Default .confirmFocusState input, input.confirmFocusState {
background-color:#FFFFCC;
}
form.Basic_Default span.additionalErrorZone {
white-space:nowrap;
}
form.Basic_Default div.errorGroup {
margin-left:125px;
}
form.Basic_Default span.serverInvalidState {
color:#b40000;
white-space:nowrap;
}
/* form general definition */
form.Basic_Default {
width:500px;
}
form.DetailsPage {
width: auto;
}
form.Basic_Default ul.Basic_Default {
list-style-type:none;
margin: 0;
padding: 0;
}
form.Basic_Default ul.formList {
padding:0 0 0 0;
margin:0 0 0 0;
list-style-type:none;
}
form.Basic_Default li.formItem {
clear:both;
}
form.Basic_Default fieldset.Basic_Default {
clear:right;
padding-bottom:12px;
}
/* legend */
form.Basic_Default legend.groupHeader {
font-weight:bold;
font-size:larger;
white-space:nowrap;
}
/* labels */
form.Basic_Default label.groupHeader {
text-align:right;
display:block;
float:left;
position:relative;
}
form.Basic_Default label.sublabel, form.Basic_Default td.DetailsPage, form.Basic_Default td.DetailsSublabel {
font-weight:normal;
text-align:right;
width:120px;
float:left;
display:block;
margin-top:5px;
margin-bottom:5px;
padding-right:5px;
}
form.Basic_Default td.DetailsPage {
width:auto;
text-align:left;
display:table-cell;
}
form.Basic_Default td.DetailsSublabel {
text-align:right;
display:table-cell;
float:left;
}
form.Basic_Default label.secondSublabel {
width:auto;
}
form.Basic_Default label.sublabelPlaceholder {
}
form.Basic_Default span.requiredIndicator {
color:#b40000;
}
form.Basic_Default span.fieldsetDescription {
color:#b40000;
}
/* span wrappers for form */
form.Basic_Default div.formGroup {
display:inline;
float:left;
}
form.Basic_Default div.lineGroup {
clear:left;
display:block;
}
/* defines column size */
form.Basic_Default div.wideColumnGroup {
width:-26px;
padding-bottom:15px;
padding-top:7px;
display:inline;
float:left;
}
form.Basic_Default div.fullColumnGroup {
width:474px;
padding-bottom:15px;
padding-top:7px;
display:inline;
float:left;
}
form.Basic_Default div.columnGroup {
width:500px;
padding-bottom:15px;
padding-top:7px;
display:inline;
float:left;
}
form.Basic_Default div.fieldGroup {
padding-left:0;
padding-right:0;
position:relative;
display:block;
float:left;
}
form.Basic_Default div.fieldPair {
display:block;
}
form.Basic_Default div.SameAsCheck_Row {
}
form.Basic_Default span.precedingText {
text-align:right;
font-weight: bold;
}
form.Basic_Default div.trailingText {
white-space:nowrap;
}
form.Basic_Default div.trailingText a {
}
form.Basic_Default div.trailingText div {
background-color:#8c8c8c;
}
/* wide groups for items on a single line */
form.Basic_Default span.wideFieldGroup {
width:100%;
float:left;
}
/* button form elements */
form.Basic_Default span.buttonFieldGroup {
float:left;
text-align:right;
padding-top:15px;
padding-left:125px;
}
form.Basic_Default input.formButton {
margin: 0;
padding: 0;
}
/* text form elements */
form.Basic_Default input.formTextfield_XSmall {
background-color:#FFF;
padding:5px 5px 5px 5px;
width:50px;
margin:0;
margin-left:2px;
}
form.Basic_Default input.formTextfield_Small {
background-color:#FFF;
padding:5px 5px 5px 5px;
width:80px;
margin:0;
margin-left:2px;
}
form.Basic_Default input.formTextfield_Medium {
background-color:#FFF;
padding:5px 5px 5px 5px;
width:120px;
margin:0;
margin-left:2px;
}
form.Basic_Default input.formTextfield_Large {
background-color:#FFF;
padding:5px 5px 5px 5px;
width:200px;
margin:0;
margin-left:2px;
}
form.Basic_Default input.formTextfield_XLarge {
background-color:#FFF;
padding:5px 5px 5px 5px;
width:592px;
margin:0;
margin-left:2px;
}
form.Basic_Default .textfieldValidState input, form.Basic_Default input.textfieldValidState {
background-color: #B8F5B1;
}
form.Basic_Default input.textfieldRequiredState, form.Basic_Default .textfieldRequiredState input,
form.Basic_Default input.textfieldInvalidFormatState, form.Basic_Default .textfieldInvalidFormatState input,
form.Basic_Default input.textfieldMinValueState, form.Basic_Default .textfieldMinValueState input,
form.Basic_Default input.textfieldMaxValueState, form.Basic_Default .textfieldMaxValueState input,
form.Basic_Default input.textfieldMinCharsState, form.Basic_Default .textfieldMinCharsState input,
form.Basic_Default input.textfieldMaxCharsState, form.Basic_Default .textfieldMaxCharsState input {
background-color: #FF9F9F;
}
form.Basic_Default .textfieldFocusState input, form.Basic_Default input.textfieldFocusState {
background-color: #FFFFCC;
}
form.Basic_Default .textfieldFlashText input, form.Basic_Default input.textfieldFlashText {
color: red !important;
}
form.Basic_Default .textfieldHintState input, form.Basic_Default input.textfieldHintState {
/*color: red !important;*/
}
/* textarea form elements */
form.Basic_Default textarea.formTextarea_Small {
background-color:#FFF;
padding:5px 5px 5px 5px;
width:252px;
height:100px;
white-space:pre;
overflow:auto;
margin:0;
margin-left:2px;
}
form.Basic_Default textarea.formTextarea_Medium {
background-color:#FFF;
padding:5px 5px 5px 5px;
width:382px;
height:150px;
white-space:pre;
overflow:auto;
margin:0;
margin-left:2px;
}
form.Basic_Default textarea.formTextarea_Large {
background-color:#FFF;
padding:5px 5px 5px 5px;
width:514px;
height:200px;
white-space:pre;
overflow:auto;
margin:0;
margin-left:2px;
}
form.Basic_Default .textareaValidState textarea, form.Basic_Default textarea.textareaValidState {
background-color:#B8F5B1;
}
form.Basic_Default textarea.textareaRequiredState, form.Basic_Default .textareaRequiredState textarea,
form.Basic_Default textarea.textareaMinCharsState, form.Basic_Default .textareaMinCharsState textarea,
form.Basic_Default textarea.textareaMaxCharsState, form.Basic_Default .textareaMaxCharsState textarea {
background-color:#FF9F9F;
}
form.Basic_Default .textareaFocusState textarea, form.Basic_Default textarea.textareaFocusState {
background-color:#FFFFCC;
}
form.Basic_Default .textareaFlashState textarea, form.Basic_Default textarea.textareaFlashState{
color:red !important;
}
form.Basic_Default textarea.textareaHintState, form.Basic_Default .textareaHintState textarea{
/* color: red !important;*/
}
/* select form elements */
form.Basic_Default select.formMenufield_XSmall {
background-color:#FFF;
padding:5px 5px 5px 5px;
width:50px;
margin:0;
margin-left:2px;
}
form.Basic_Default select.formMenufield_Small {
background-color:#FFF;
padding:5px 5px 5px 5px;
width:80px;
margin:0;
margin-left:2px;
}
form.Basic_Default select.formMenufield_Medium {
background-color:#FFF;
padding:5px 5px 5px 5px;
width:120px;
margin:0;
margin-left:2px;
}
form.Basic_Default select.formMenufield_Large {
background-color:#FFF;
padding:5px 5px 5px 5px;
width:252px;
margin:0;
margin-left:2px;
}
form.Basic_Default select.formMenufield_XLarge {
background-color:#FFF;
padding:5px 5px 5px 5px;
width:382px;
margin:0;
margin-left:2px;
}
form.Basic_Default select.formListfield_XSmall {
background-color:#FFF;
padding:5px 5px 5px 5px;
width:50px;
height:100px;
margin:0;
margin-left:2px;
}
form.Basic_Default select.formListfield_Small {
background-color:#FFF;
padding:5px 5px 5px 5px;
width:80px;
height:100px;
margin:0;
margin-left:2px;
}
form.Basic_Default select.formListfield_Medium {
background-color:#FFF;
padding:5px 5px 5px 5px;
width:120px;
height:100px;
margin:0;
margin-left:2px;
}
form.Basic_Default select.formListfield_Large {
background-color:#FFF;
padding:5px 5px 5px 5px;
width:252px;
height:100px;
margin:0;
margin-left:2px;
}
form.Basic_Default select.formListfield_XLarge {
background-color:#FFF;
padding:5px 5px 5px 5px;
width:382px;
height:150px;
margin:0;
margin-left:2px;
}
form.Basic_Default .selectValidState select, form.Basic_Default select.selectValidState {
background-color: #B8F5B1;
}
form.Basic_Default select.selectRequiredState, form.Basic_Default .selectRequiredState select,
form.Basic_Default select.selectInvalidState, form.Basic_Default .selectInvalidState select {
background-color: #FF9F9F;
}
.selectFocusState select, form.Basic_Default select.selectFocusState {
background-color: #FFFFCC;
}
/* radio button form elements */
form.Basic_Default input.formRadioField_Standard {
background-color:#FFF;
padding:2px 2px 2px 2px;
margin-left:2px;
}
form.Basic_Default .radioValidState input, form.Basic_Default input.radioValidState {
background-color:#B8F5B1;
}
form.Basic_Default input.radioRequiredState, form.Basic_Default .radioRequiredState input,
form.Basic_Default input.radioInvalidState, form.Basic_Default .radioInvalidState input {
background-color:#FF9F9F;
}
form.Basic_Default .radioFocusState input, form.Basic_Default input.radioFocusState {
background-color:#FFF;
}
form.Basic_Default span.radioFieldGroup_Narrow {
}
form.Basic_Default span.radioFieldGroup_Wide {
display:block;
}
form.Basic_Default span.radioFieldGroup_OneColumn {
display:block;
}
form.Basic_Default span.radioGroup_Narrow {
}
form.Basic_Default span.radioGroup_Wide {
display:block;
}
form.Basic_Default span.radioGroup_OneColumn {
display:block;
}
form.Basic_Default label.radioSublabel_Narrow {
padding:2px 2px 2px 2px;
font-weight:normal;
width:60px;
float:left;
display:block;
text-align:left;
}
form.Basic_Default label.radioSublabel_Wide {
padding:2px 2px 2px 2px;
font-weight:normal;
width:135px;
float:left;
display:block;
text-align:left;
}
form.Basic_Default label.radioSublabel_OneColumn {
padding:2px 2px 2px 2px;
font-weight:normal;
display:block;
text-align:left;
}
/* checkbox form elements */
form.Basic_Default input.SameAsCheck {
background-color:#FFF;
padding:2px 2px 2px 2px;
margin-left:2px;
}
form.Basic_Default input.formCheckboxField_Standard {
background-color:#FFF;
padding:2px 2px 2px 2px;
margin-left:2px;
}
form.Basic_Default .checkboxValidState input, form.Basic_Default input.checkboxValidState {
background-color:#B8F5B1;
}
form.Basic_Default input.checkboxRequiredState, form.Basic_Default .checkboxRequiredState input,
form.Basic_Default input.checkboxMinSelectionsState, form.Basic_Default .checkboxMinSelectionsState input,
form.Basic_Default input.checkboxMaxSelectionsState, form.Basic_Default .checkboxMaxSelectionsState input {
background-color:#FF9F9F;
}
form.Basic_Default .checkboxFocusState input, form.Basic_Default input.checkboxFocusState {
background-color:#FFF;
}
form.Basic_Default span.checkFieldGroup_Narrow {
display:block;
}
form.Basic_Default span.checkFieldGroup_Wide {
}
form.Basic_Default span.checkFieldGroup_OneColumn {
display:block;
}
form.Basic_Default span.checkGroup_Narrow {
display:block;
}
form.Basic_Default span.checkGroup_Wide {
}
form.Basic_Default span.checkGroup_OneColumn {
display:block;
}
form.Basic_Default label.checkSublabel_Narrow {
font-weight:normal;
width:60px;
float:left;
display:block;
text-align:left;
}
form.Basic_Default label.checkSublabel_Wide {
font-weight:normal;
width:135px;
float:left;
display:block;
text-align:left;
}
form.Basic_Default label.checkSublabel_OneColumn {
font-weight:normal;
display:block;
text-align:left;
}
/* confirm and password states (same as text) */
form.Basic_Default input.formPasswordfield_XSmall {
background-color:#FFF;
padding:5px 5px 5px 5px;
width:50px;
margin:0;
margin-left:2px;
}
form.Basic_Default input.formPasswordfield_Small {
background-color:#FFF;
padding:5px 5px 5px 5px;
width:80px;
margin:0;
margin-left:2px;
}
form.Basic_Default input.formPasswordfield_Medium {
background-color:#FFF;
padding:5px 5px 5px 5px;
width:120px;
margin:0;
margin-left:2px;
}
form.Basic_Default input.formPasswordfield_Large {
background-color:#FFF;
padding:5px 5px 5px 5px;
width:200px;
margin:0;
margin-left:2px;
}
form.Basic_Default input.formPasswordfield_XLarge {
background-color:#FFF;
padding:5px 5px 5px 5px;
width:592px;
margin:0;
margin-left:2px;
}
form.Basic_Default .confirmValidState input, form.Basic_Default input.confirmValidState {
background-color: #B8F5B1;
}
form.Basic_Default input.confirmRequiredState, form.Basic_Default .confirmRequiredState input,
form.Basic_Default input.confirmInvalidState, form.Basic_Default .confirmInvalidState input {
background-color: #FF9F9F;
}
form.Basic_Default .confirmFocusState input, form.Basic_Default input.confirmFocusState {
background-color: #FFFFCC;
}
form.Basic_Default .passwordValidState input, form.Basic_Default input.passwordValidState {
background-color: #B8F5B1;
}
form.Basic_Default input.passwordRequiredState, form.Basic_Default .passwordRequiredState input,
form.Basic_Default input.passwordInvalidStrengthState, form.Basic_Default .passwordInvalidStrengthState input,
form.Basic_Default input.passwordMinCharsState, form.Basic_Default .passwordMinCharsState input,
form.Basic_Default input.passwordCustomState, form.Basic_Default .passwordCustomState input,
form.Basic_Default input.passwordMaxCharsState, form.Basic_Default .passwordMaxCharsState input {
background-color:#FF9F9F;
}
form.Basic_Default .passwordFocusState input, form.Basic_Default input.passwordFocusState {
background-color: #FFFFCC;
}
/*Captcha form element*/
form.Basic_Default img.Captcha {
margin:0 0 -7px 2px;
}
/*Datepicker form element*/
.ui-datepicker {
}
.ui-datepicker a {
}
.ui-datepicker .ui-widget-header {
}
.ui-datepicker thead th {
}
.ui-datepicker tbody td a:link,
.ui-datepicker tbody td a:visited,
.ui-datepicker tbody td a.ui-state-default {
}
.ui-datepicker tbody td a:active,
.ui-datepicker tbody td a.ui-state-active {
}
.ui-datepicker tbody td a:hover,
.ui-datepicker tbody td a.ui-state-hover {
}
.ui-datepicker tbody td a.ui-state-error:link,
.ui-datepicker tbody td a.ui-state-error:visited,
.ui-datepicker tbody td a.ui-state-error {
}
.ui-datepicker tbody .ui-state-error-text {
}
.ui-datepicker tbody td.ui-datepicker-week-end a:link,
.ui-datepicker tbody td.ui-datepicker-week-end a:visited,
.ui-datepicker tbody td.ui-datepicker-week-end a {
}
.ui-datepicker tbody td.ui-datepicker-today a:link,
.ui-datepicker tbody td.ui-datepicker-today a:visited,
.ui-datepicker tbody td.ui-datepicker-today a:hover,
.ui-datepicker tbody td.ui-datepicker-today a {
}
.ui-datepicker tbody td.ui-datepicker-week-end a:hover,
.ui-datepicker tbody td.ui-datepicker-week-end a.ui-state-hover {
}
.ui-datepicker tbody td.ui-datepicker-week-end a:active,
.ui-datepicker tbody td.ui-datepicker-week-end a:focus,
.ui-datepicker tbody td.ui-datepicker-week-end a.ui-state-active {
}
.ui-datepicker-trigger {
border: 0;
margin: 0 0 0 1px;
padding: 0;
background: none;
}
form.Basic_Default .TextOnly {
padding-top: 5px;
display: table-cell;
}