Geek Answers Handbook

Hide input borders in the print style sheet (chrome)

I have a form that should print as plain text when printing, i.e. inputs and text fields should not have borders. I 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 do not affect print output. A.

See: fiddle

Change . This is ultimately caused by:

Chrome issue 174583 : a shadow shadow prints when printed.

The proposed workaround for adding -webkit-filter: blur (0) kinda works, but still leaves traces of the shadow of the input border, so a javascript workaround like this in the accepted answer is now the best approach.

+4
3

bootstrap .form-control box-shadow. , CSS (, Chrome). jQuery? @media .

, .

$( ".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>
Hide result
+6

transition: none .form-control: D

body {
  padding: 15px;
}
@media print {
  .form-control, .form-control.nobug {
    border: 0;
    outline: 0;
    box-shadow: none;
  }
  .form-control.nobug {
    transition: none; /*-- THIS IS IMPORTANT -- */
  }
}
<html>

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

<body>
  <div class="form-group">
    <button class="btn btn-primary" onclick="window.print()">Print with your Chrome</button>
  </div>
  <div class="form-group">
    <input type="text" class="form-control" value="form-control bug">
  </div>
  <div class="form-group">
    <input type="text" class="form-control nobug" value="no bug (disable transition)">
  </div>
  
</body>
Hide result
+5

"" "" ( )

@media print {
    input, textarea {
        outline: none !important;
    } 
}

border: none border: 0, , .

+1

More articles:


All Articles