Hiding input borders in print stylesheet (chrome)

Question

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

@media print {
    input, textarea {
        border: 0 !important;
        border-style: none !important;
    }
}

This works in FF, but not in chrome.

-webkit-shadow and
-webkit-appearance

also don't appear to affect the print output.

See: fiddle

Edit: This is ultimately caused by:

Chrome Issue 174583: box-shadow, when printed, appears solid black .

A suggested workaround of adding -webkit-filter:blur(0) 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.

Answer 1

It's caused by the bootstrap class .form-control and its box-shadow property. It seems difficult to remove with CSS (seems like a Chrome print bug to me). How about removing the class on print with jQuery? The default input styles can be removed with the @media query as normal.

Working Example

You would probably want to target the normal browser print event as well.

$( ".print-now" ).on( "click", function() { //the print button has the class .print-now
    event.preventDefault(); // prevent normal button action 
   $('.form-control').removeClass('form-control'); // remove the form-control class
    window.print(); // print the page
    $('input').addClass('form-control'); // return the class after printing
});

@media print {
  button {
    display: none !important;
  }
  input,
  textarea {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
  }
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form class="form-inline">
  <div class="row">
    <div class="col-xs-2">
      <input type="text" class="form-control input input-small" maxlength="3" value="some" />
    </div>
    <div class="col-xs-2">
      <input type="text" class="form-control input-medium" value="text" />
    </div>
    <div class="col-xs-2">
      <button class="form-control btn btn-warning print-now">Print me!</button>
    </div>
  </div>
</form>
<p>When the above is printed, there should be NO borders on the inputs.</p>
<p>How to accomplish this?</p>