Remove CSS from select using jQuery

Question

Hi guys, I had more than one css applied to an input, one default and others to customize. I want to disable the css default but not the others. I tried to remove with:

$j('#teste').css("max-width", "");

and

$j('#teste').removeAttr("max-width");

Those ways, remove all css. How can I do this with jQuery?

Answer 1

use css classes and add/remove them to control the styles.

$('#id').addClass('foo');

$('#id').removeClass('foo');

Answer 2

$.toggleClass() may work best if you have a stylesheet with a unique class for the "custom" styles that need to be applied after the default and then quickly removed.

$('selector').toggleClass('foo');

This will add the foo class if it's not present, and remove it if the element(s) doesn't have the foo class. See the jQuery toggleClass documentation

If all of your styling is inline () you can use the removeAttr method:

$('selector').removeAttr('style');

Answer 3

You cannot (as other people have already stated) remove styling that is applied through stylesheets. You can, however, override styling. For example, if max-width is applied through a stylesheet you should be able to override it by changing the value or setting it to 'auto':

$('#teste').css("max-width", "999999px");

or possibly:

$('#teste').css("max-width", "auto");

That being said, I agree with the other posts that the best bet is probably just to fix your css and possibly toggle styling by toggling a class.