Prevent Form Validation CSS .error from highlighting textbox

Question

I am using the form validation JQuery plugin, and I have everything working quite well, except for one particular thing.

I am using the error class in CSS to stylize how the error text looks like so:

.error {
    font-family: Verdana, Arial, sans-serif;
    font-size: 0.7em;
    color: #2d0004;
    background-color: #ff0;
}

However, whenever I get an error (a required field not being filled), the inputbox is also affected by the CSS styling shown above. How can I prevent the CSS styling shown above from affecting the input field associated with the error, and only apply the style to the error text?

Thanks in advance.

Answer 1

Try this CSS:

.error:not(input) {
    font-family: Verdana, Arial, sans-serif;
    font-size: 0.7em;
    color: #2d0004;
    background-color: #ff0;
}