Question

我有一个表格，在打印时，应显示为纯文本，即输入和textareas应该没有边框。我添加了一个打印样式表，比如

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

这适用于FF，但不适用于chrome。

-webkit-shadow and
-webkit-appearance

也似乎不会影响打印输出。

请参阅：fiddle

修改：这最终是由以下原因引起的：

Chrome问题174583：打印时，框阴影显示为纯黑色。

建议的解决方法是添加 -webkit-filter：blur（0）有点工作，但仍留下输入边框阴影的痕迹，因此像接受的答案中的javascript解决方案似乎是最好的现在的方法。

Answer 1

由引导类.form-control及其box-shadow属性引起。用CSS删除似乎很难（对我来说似乎是一个Chrome打印错误）。如何用jQuery删除打印类？可以使用@media查询正常删除默认输入样式。

工作示例

您可能也想要定位普通的浏览器打印事件。

＆＃13;

$( ".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
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

只需将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>

Answer 3

你需要使用＆＃34; outline＆＃34;而不是＆＃34; border＆＃34; （或除边框外）

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

另外，请尝试border: none而不是border: 0，如果仍有问题可能会有所帮助。

在打印样式表（chrome）中隐藏输入边框

3 个答案:

工作示例