私は、ユーザーが値を入力した後にボタンをクリックしてページを印刷できるフィールドがほとんどない単純なフォームを持っています。ページが印刷された後にフィールドの枠線が表示されない
実際の印刷が実行されている場合を除いて、すべてが正常に動作します。入力フィールドの枠線がありません。
これは、フォーム
<form name="hongkiat" id="hongkiat-form" method="post" action="#">
<div id="wrapping" class="clearfix">
<section id="aligned">
<div class="block">
<label for="name">Full Name</label>
<input type="text" name="name" id="name" placeholder="" autocomplete="off" tabindex="1" class="txtinput">
</div>
<div class="block">
<label for="name">Email Address</label>
<input type="email" name="email" id="email" placeholder="" autocomplete="off" tabindex="2" class="txtinput">
</div>
<div class="block">
<label for="name">Statement</label>
<textarea name="message" id="message" placeholder="" tabindex="5" class="txtblock"></textarea>
</div>
</section>
</div>
<section id="buttons">
<input type="button" value="Print This Page" class="resetbtn" id="resetbtn" onClick="window.print()">
<br style="clear:both;">
</section>
</form>
であり、これは私が印刷された文書に見るとPDFがこれですと、スキャンどのようなCSS
#hongkiat-form { box-sizing: border-box; }
#hongkiat-form .txtinput {
display: block;
font-family: "Helvetica Neue", Arial, sans-serif;
border-style: solid;
border-width: 2px;
border-color: #dedede;
margin-bottom: 30px;
font-size: 1.55em;
padding: 11px 20px;
width: 65%;
color: #777;
float: right;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}
#hongkiat-form .txtinput:focus {
color: #333;
border-color: rgba(41, 92, 161, 0.4);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
outline: 0 none;
}
#hongkiat-form textarea {
display: block;
font-family: "Helvetica Neue", Arial, sans-serif;
border-style: solid;
border-width: 1px;
border-color: #dedede;
margin-bottom: 25px;
font-size: 1.5em;
padding: 11px 20px;
width: 65%;
height: 180px;
color: #777;
float: right;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}
#hongkiat-form textarea:focus {
color: #333;
border-color: rgba(41, 92, 161, 0.4);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);
outline: 0 none;
}
#hongkiat-form #aligned {
box-sizing: border-box;
float: left;
width: 910px;
margin-right: 50px;
}
#wrapping { width: 100%; box-sizing: border-box; }
.block label {
display: inline-block;
width:150px;
float:left;
font-family: "Droid Serif", Georgia, serif;
font-size: 2em;
line-height: 1.5em;
font-weight: 900;
margin: 5px;
}
label { clear: both; }
これは、見た目のいいデモ:https://jsfiddle.net/aooL87wy/1/
ません..私はフィールドを移動しようとしたが万が一彼らは1に行くかどうかを確認するためにも、右/上/下/左 – user5996816