title: Reset Styles for input elements and restyling to bring back the default appearance
body: <p>I have a simple input field.</p>
  
  <pre><code>&lt;input name="1" onfocus="this.value=''" type="text" size="20" value="input 1" title="Enter your search here" /&gt;
  </code></pre>
  
  <p>Because different browsers add different amounts of padding, margin and border to it, I have to reset it as follows.</p>
  
  <pre><code>input
  {
  padding: 0;
  margin: 0;
  border: 0;
  border: none;
  }
  </code></pre>
  
  <p>Now I have a unstyled (leaving other properties such as font-size or cursor alone for the movement) and I want to bring back the appearnce that were default before the reset but with consistant values so that the appearance as well as the dimensions are same in all browsers. I do</p>
  
  <pre><code>input
  {
  border: 1px inset #F0F0F0;
  }
  </code></pre>
  
  <p>However it changes something and the appearnce is not the same as per this fiddle where the first input (input 1) has not been reset with the border property while the second input (input 2) has been reseted (border: 0; border: none;) and again restyled (border: 1px inset #F0F0F0;).</p>
  
  <p><a href="http://jsfiddle.net/LJerh/" rel="nofollow">jsFiddle</a></p>
  
  <p>How do I get the same appearance back after applying a style reset to it.</p>