How to remove all inherited and computed styles from an element?

Question

The page has the following CSS:

input[type=text]
{
    display: inline; padding: 7px; background-color: #f6f6f6; font-size: 12px; letter-spacing: 1px; border: 1px solid #aac7d1; 
    /* lots of other styles here... */
}

I have many text-input elements and the following:

<input type="text" id="txt1" />

And I try to apply different styles to this individual textbox (txt1) via jQuery:

$('#txt1').removeClass().removeAttr('style').css({
    'background-color': '#ff0000',
    //lots of other styles here...
});

But those styles that come from the style-sheet cannot be removed from the element this way. The css rule, input[type=text] is not a custom class so removeClass() does not work here, if I'm right.

What I want to do is; to completely remove all styles ever applied to the element txt1. Is there a certain way to do this other than getting the list of all computed styles and setting them empty?

Answer 1

Is there a certain way to do this

There is no way to stop rules applying to an element if the selector matches.

You can either

• set every property you want to have a specific value (with a suitably specific selector and !important
• move the element to a different document (which could then be loaded with, for example, an iframe).
• remove the rule (and thus cause it to not apply to any element)
• change the selector on the ruleset (so it doesn't match the element any more, you have to be careful to make sure it still selects elements you care about)

other than getting the list of all computed styles and setting them empty?

That wouldn't work. Most properties won't accept a blank value, so the rule would be invalid and ignored (thus causing the previous rule to apply again).