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