0
我有幾個字段的簡單窗體,用戶插入值後可以點擊按鈕打印並打印頁面。在頁面打印後不可見邊框周圍的邊框
一切工作正常,除非實際打印執行輸入字段邊框丟失。
這是形式
<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>
這是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/
號。我已經試過移動領域左/右/上/下還檢查是否任何機會他們去一個高於其他.. – user5996816