title: Hiding input borders in print stylesheet (chrome)
body: <p>I have a form that, when printed, should display as plain text, i.e. the inputs and textareas should have no borders.
  I've added a print stylesheet, something like </p>
  
  <pre><code>@media print {
      input, textarea {
          border: 0 !important;
          border-style: none !important;
      }
  }
  </code></pre>
  
  <p>This works in FF, but not in chrome.</p>
  
  <pre><code>-webkit-shadow and
  -webkit-appearance
  </code></pre>
  
  <p>also don't appear to affect the print output.</p>
  
  <p>See: <a href="http://jsfiddle.net/rych/s1aoaydy/1/" rel="nofollow" title="fiddle">fiddle</a></p>
  
  <p><strong>Edit</strong>: This is ultimately caused by:</p>
  
  <blockquote>
    <p>Chrome Issue <a href="https://code.google.com/p/chromium/issues/detail?id=174583" rel="nofollow">174583</a>: box-shadow, when printed, appears solid black .</p>
  </blockquote>
  
  <p>A suggested workaround of adding <em>-webkit-filter:blur(0)</em> kinda works, but still leaves traces of the input border shadow, so a javascript workaround like that in the accepted answer seems the best approach for now.</p>