title: Making div look like input: cross-browser compatability, not rendering in chrome
body: <p><strong>TOPIC:</strong><br>
  I'm making a couple div's to accept some drag/drop values and stylizing them to look like inputs.<br>
  Everything renders beautifully in Firefox.<br>
  In Chrome, however, the borders and box-shadows are not rendering correctly. (I'm in Chm v.24, btw)</p>
  
  <p><strong>GOAL:</strong><br>
  Above all else, I just want it to work.<br>
  But ... I'm just as happy to get <em>any</em> suggestions on how I can do <em>anything</em> better  :)</p>
  
  <p><strong>NOTE:</strong><br>
  This is for an intra-office app. FireFox &amp; Chrome are the only two browsers officially supported here, so, while compatibility across <em>all</em> browsers would definitely be nice, I am only required to code to those two.</p>
  
  <p><strong>CODE:</strong> <a href="http://jsfiddle.net/mOrloff/6qbwY/" rel="nofollow">Also visible <em><strong>here on jsFiddle</strong></em></a><br></p>
  
  <pre><code>/** html **/
  &lt;section id="dragged-drop-zone" &gt;
      &lt;div class="look-like-input textfield" contenteditable&gt;&lt;/div&gt;
      &lt;br /&gt;
      &lt;div class="look-like-input textarea" contenteditable&gt;&lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>. </p>
  
  <pre><code>/** css **/
  .look-like-input{
      background-color: white;
      border: 1px solid #CCC;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
      padding: 0.25em 0.5em;
      min-height: 1.5em;
  }
  .look-like-input.textfield{
      appearance: field;
      -moz-appearance: textfield;
      -webkit-appearance: textfield;
  }
  .look-like-input.textarea{
      appearance: field;
      -moz-appearance: textfield-multiline;
      -webkit-appearance: textarea;
      overflow: auto;
      resize: both;
      min-height: 3.5em;
  }
  .look-like-input:focus{
      border: 1px solid #69F;
      -moz-box-shadow: 0 0 5px 2px rgba(0, 100, 255, 0.15);
      -webkit-box-shadow: 0 0 5px 2px rgba(0, 100, 255, 0.15);
      box-shadow: 0 0 5px 2px rgba(0, 100, 255, 0.15);
  }
  
  
  #dragged-drop-zone{
      border: 1px solid #666;
      -webkit-border-radius: 1em;
      -moz-border-radius: 1em;
      border-radius: 1em;
      padding: 1em;
  }
  </code></pre>
  
  <p><br>
  Thanks-a-bunch!</p>