2017-03-08 18 views
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> 

であり、これは私が印刷された文書に見ると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; } 

です: enter image description here

これは、見た目のいいデモ:https://jsfiddle.net/aooL87wy/1/

+0

ません..私はフィールドを移動しようとしたが万が一彼らは1に行くかどうかを確認するためにも、右/上/下/左 – user5996816

答えて

1

あなたは本当に印刷物のボックスシャドウ効果が必要ですか?

そしてここsimplfied borderプロパティ:

border: 2px solid #dedede; 

Here a fiddle

+0

助けてくれてありがとう。そして、はい、私は印刷物に影を必要としません。 – user5996816

関連する問題