2017-03-08 201 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> 

這是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; } 

我看到在打印文檔和掃描爲PDF格式是這樣的: enter image description here

這是演示形式,看起來不錯..:https://jsfiddle.net/aooL87wy/1/

+0

號。我已經試過移動領域左/右/上/下還檢查是否任何機會他們去一個高於其他.. – user5996816

回答

1

您是否真的需要打印的陰影效果?

在這裏,一個簡化的border屬性:

border: 2px solid #dedede; 

Here a fiddle

+0

感謝您的幫助。是的,我不需要打印陰影。 – user5996816