title: How to remove 3D border of input filed in Chrome
body: <p>I want to add blue shadow highlight for text input when it receives focus:</p>
  
  <pre><code>input:focus {
      box-shadow:0px 0px 5px #6192D1;
      -webkit-box-shadow: 0px 0px 5px  #6192D1;
      -moz-box-shadow: 0px 0px 5px  #6192D1;       
      outline: 0;
  }
  </code></pre>
  
  <p>In Firefox it looks well, but Chome adds some inner 3d looking borders.</p>
  
  <p><a href="http://jsfiddle.net/hSmA3/" rel="noreferrer"><strong>JSFiddle</strong></a></p>
  
  <p>Chrome adds following styles:</p>
  
  <pre><code>border-top-style: inset;
  border-top-width: 2px;
  border-bottom-style: inset;
  border-bottom-width: 2px;
  border-left-style: inset;
  border-left-width: 2px;
  border-right-style: inset;
  border-right-width: 2px;
  </code></pre>
  
  <p>If I set something like:</p>
  
  <pre><code>border-width: 2px;
  border-color: transparent;
  border-style: inset;
  </code></pre>
  
  <p>Border has gone in Chrome, but in FF it makes the field resizing on focus.</p>
  
  <p><a href="http://jsfiddle.net/3yKNP/" rel="noreferrer"><strong>JSFiddle</strong></a></p>
  
  <p>Any ideas how to get rid of 3d border not hurting the appearence in FF?</p>