twitter-bootstrap 在打印样式表 (chrome) 中隐藏输入边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26792830/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hiding input borders in print stylesheet (chrome)
提问by rych
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.
这适用于 FF，但不适用于 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 .
Chrome 问题174583：box-shadow 在打印时显示为纯黑色。
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.
添加-webkit-filter:blur(0)的建议解决方法有点有效，但仍会留下输入边框阴影的痕迹，因此在已接受的答案中使用类似的 javascript 解决方法似乎是目前最好的方法。
回答by misterManSam
It's caused by the bootstrap class .form-controland its box-shadowproperty. 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.
它是由引导程序类.form-control及其box-shadow属性引起的。使用 CSS 似乎很难删除（对我来说似乎是 Chrome 打印错误）。使用 jQuery 删除打印类怎么样？可以像往常一样使用@media 查询删除默认输入样式。
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>回答by bissy
Just add transition: noneto .form-control:D
只需添加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>回答by erikrunia
you need to use "outline" instead of "border" (or in addition to border)
您需要使用“轮廓”而不是“边框” （或除了边框）
@media print {
input, textarea {
outline: none !important;
}
}
also, try border: noneinstead of border: 0as well, may help if still having issues.
此外，如果仍然有问题，请尝试border: none而不是border: 0也可能会有所帮助。
