PDA

View Full Version : Spry Validation & CSS


doakh
02-16-2011, 04:33 PM
I have a 'contact' page with Spry textfield and textarea vaildation. In my site.css file I have 'background:color' specified for the input tags to provide contrast to the 'contact' page. This causes the Spry widget to not display the different 'input' colors depending on what the 'state' of the widget is ..(focus. vaild, invalid..etc). I have ths Spry.css file loading afte the site.css. Is there a way to have both working together?

www.designthelight.com/pages/contact.html (http://www.designthelight.com/pages/contact.html)

Thanks

doakh
02-17-2011, 05:53 PM
I have a 'contact' page with Spry textfield and textarea vaildation. In my site.css file I have 'background:color' specified for the input tags to provide contrast to the 'contact' page. This causes the Spry widget to not display the different 'input' colors depending on what the 'state' of the widget is ..(focus. vaild, invalid..etc). I have ths Spry.css file loading afte the site.css. Is there a way to have both working together?

www.designthelight.com/pages/contact.html (http://www.designthelight.com/pages/contact.html)

Thanks

Figured it out. Thread closed!

DWcourse
02-17-2011, 06:58 PM
You might want to post your solution for other people to benefit from.

doakh
02-18-2011, 12:52 AM
You might want to post your solution for other people to benefit from.

Add the following to your controlling css document.

<style>
.textareaFocusState textarea, #contact p textarea.textareaFocusState {
background-color: #FFFFCC;
}
.textfieldFocusState input, #contact p input.textfieldFocusState {
background-color: #FFFFCC;
}
</style>

Of course you will need to add the appropriate selectors;.....for me it was

#contact p .textareaFocusState textarea, #contact p textarea.textareaFocusState {
background-color: #FFFFCC;
}