Hiding input borders in print stylesheet (chrome)

11,530

Solution 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>

Solution 2

Just add transition: none to .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>

Solution 3

you need to use "outline" instead of "border" (or in addition to border)

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

also, try border: none instead of border: 0 as well, may help if still having issues.

Share:
11,530

Related videos on Youtube

rych
Author by

rych

Updated on July 05, 2022

Comments

  • rych
    rych over 1 year

    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.

  • rych
    rych about 9 years
    Thanks for the response, but all permutations I've tried of outline and border, 0, none, '0 none', etc have not worked.
  • rych
    rych about 9 years
    Yes, they do. When used in the screen-targeted css, box-shadow: none !important; does the trick, and it prints without borders. Within the print media block, it seems to be ignored.
  • rych
    rych almost 9 years
    Thanks for the workaround. I've found the Chrome bug : Issue 174583: box-shadow, when printed, appears solid black.
  • KoolKabin
    KoolKabin over 8 years
    Instead of adding class form-control to all input, I prefer to add them to previous list only by following code: $objList = $('.form-control').removeClass('form-control'); window.print(); $objList.addClass('form-control');
  • fischgeek
    fischgeek about 8 years
    transition: none; FTW.
  • Nino Stella
    Nino Stella almost 7 years
    Just a note: you could attach the script to the beforePrint and afterPrint events so you can get all working even if the user launch the print through the browser button or menu item.