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         


        

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).

Answer 2

As you can see at this link: http://www.w3.org/TR/CSS2/cascade.html#specificity, all selectors has specificity value. So, if you write such css rule: #txt1 {}, you can reset all unnecessary values.