How to get original browser set input colors back after changing them with jQuery().css() ?

Question

Problem with jQuery:

After changing the border and background color of some input fields in a form that fail the validation i don't know how to get the previous, original colors back as i don't pre-style the inputs but use the browser settings instead. how to handle this?

thanks in advance,

clubnite

Answer 1

Set the value of your modified attributes to inherit

Answer 2

What you should be doing is not changing the CSS attributes, but adding a css class to the element. When the validation fails, remove that CSS class.

Answer 3

I would use a CSS class instead of setting individual properties with jQuery. That way, you can just add and remove the class to apply or remove the style. It's simpler, probably faster, and lets you keep all your style information together in one place. Adding a class also makes it easier to find all the fields that have errors with jQuery selector.

If, for whatever reason, you really want to use .css(), you can remove the properties by setting them to an empty string. For example, if you added a border, you would remove it with

$(selector).css("border", "");

Answer 4

This will remove the color from the style element styles, causing the stylesheet to resume control.

$(sel).css('color', '')

Note that this will not restore the color to a value that was explicitly set before. To do that, you'd have to cache the prior values.