title: How to remove all inherited and computed styles from an element?
body: <p>The page has the following CSS:</p>
  
  <pre><code>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... */
  }
  </code></pre>
  
  <p>I have many text-input elements and the following:</p>
  
  <pre><code>&lt;input type="text" id="txt1" /&gt;
  </code></pre>
  
  <p>And I try to apply different styles to this individual textbox (txt1) via jQuery:</p>
  
  <pre><code>$('#txt1').removeClass().removeAttr('style').css({
      'background-color': '#ff0000',
      //lots of other styles here...
  });
  </code></pre>
  
  <p>But those styles that come from the style-sheet cannot be removed from the element this way. The css rule, <code>input[type=text]</code> is not a custom class so <code>removeClass()</code> does not work here, if I'm right.</p>
  
  <p>What I want to do is; to completely remove all styles ever applied to the element <code>txt1</code>. Is there a certain way to do this other than getting the list of all computed styles and setting them empty?</p>