<div class="mian"> <div class="form"> <form method="post" action="s.php" name="jsForm" id="jsForm"> <div class="form-col"> <div class="form-input"> <div class="form-input-box"> <div class="form-input-txt fr"> <input type="text" name="title" id="title" placeholder="请输入姓名"> </div> </div> <div class="form-input-box"> <div class="form-input-txt fr"> <input type="text" name="q2" id="q2" placeholder="请输入身份证号"> </div> </div> <div class="form-input-box"> <div class="form-input-txt fr"> <input type="text" name="q3" id="q3" placeholder="请输入证书编号"> </div> </div> <div class="form-input-button"> <button type="submit" name="search" id="search">确认查询</button> </div> <div class="form-input-note"> 注:任意输入以上两项内容即可查询 </div> </div> </div> </form> </div> </div>
<style> .mian .form { width: 100%; padding-bottom: 15px; } .mian .form .form-col { width: 350px; height: 295px; background: rgba(255,255,255,0.6); -webkit-border-radius: 20px; border-radius: 20px; margin: 0 auto; margin-top: 50px; -webkit-box-shadow: 0 2px 6px rgba(51,51,51,0.2); box-shadow: 0 2px 6px rgba(51,51,51,0.2); text-align: center; padding: 40px 0; } .mian .form .form-col .form-input { width: 85%; display: table; min-height: 100px; margin: 0 auto; } .mian .form .form-col .form-input .form-input-box { width: 100%; height: 36px; border: 1px solid #b2bfc2; -webkit-border-radius: 6px; border-radius: 6px; background-color: #fff; margin-bottom: 15px; } .mian .form .form-col .form-input .form-input-box .form-input-img { width: 52px; height: 36px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .mian .form .form-col .form-input .form-input-box .form-input-txt { width: -webkit-calc(100% - 52px); width: calc(100% - 52px); } .mian .form .form-col .form-input .form-input-box .form-input-txt input { width: 100%; height: 36px; border: none; font-size: 14px; background: none; color: #444; padding-left: 5px; } .mian .form .form-col .form-input .form-input-button { width: 100%; } .mian .form .form-col .form-input .form-input-button button { width: 100%; height: 36px; background-color: #128bd6; color: #fff; -webkit-border-radius: 6px; border-radius: 6px; font-size: 16px; } .mian .form .form-col .form-input .form-input-note { width: 100%; padding-top: 10px; line-height: 30px; font-size: 14px; color: #2493d9; text-align: left; } </style>
转载请注明:css样式» 提交查询input查询表单自适应
标签: