ryc*_*ych 5 css google-chrome media-queries twitter-bootstrap
我有一个表格,打印时,应显示为纯文本,即输入和textareas应没有边框.我添加了一个打印样式表,如
@media print {
input, textarea {
border: 0 !important;
border-style: none !important;
}
}
这适用于FF,但不适用于chrome.
-webkit-shadow and
-webkit-appearance
也似乎不会影响打印输出.
见:小提琴
编辑:这最终是由以下原因引起的:
Chrome Issue 174583:打印时,框阴影显示为纯黑色.
建议的解决方法是添加-webkit-filter:blur(0)有点工作,但仍留下输入边框阴影的痕迹,因此像接受的答案中的javascript解决方法似乎是目前最好的方法.
它是由引导类.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>只需添加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>| 归档时间： |
|
| 查看次数： |
9488 次 |
| 最近记录： |