修改格式框

Question

我已经创建了下面的页面的高度和长度： http://jsfiddle.net/mocfvg4w/17/

但我不能工作，如何降低形式的高度和增加了盒的长度是多少？

我希望能够使高度略小盒至少两倍的长度。

我已经作出的代码是：

<div id="wrapper"> 
    <div class="form-holder"> 
     <img src="https://i.imgur.com/4HDC0Vs.jpg" alt="header" width="500" height="906"> 
     <form id="form" action="#" method="post" name="result" style="width:200px;"> 
      <table> 
       <tbody> 
        <tr> 
         <td> 
          <input type="text" name="id" id="input_field" maxlength="4" /> 
         </td> 
        </tr> 
       </tbody> 
      </table> 
     </form> 
    </div> 
</div> 

CSS

#form { 
    position: absolute; 
    top: 300px; 
    left: 300px; 
    margin-left:-25px; 
    width:104px; 
    height:142px; 
} 

.form-holder { 
    position: relative; 
} 

的Javascript

$("#input_field").keyup(function(){ 
if($(this).val().length == 4 && $(this).val() == "2000") { 
    alert("it works"); 
    // $('#form') 
    //  .submit(); 
} 
}) 

Answer 1

你写在错误的方式CSS代码 下面的代码替换你的CSS代码你会看到影响

$("#input_field").keyup(function(){ 
 
    if($(this).val().length == 4 && $(this).val() == "2000") { 
 
     alert("it works"); 
 
     // $('#form') 
 
     //  .submit(); 
 
    } 
 
})

form { 
 
    position: absolute; 
 
    top: 300px; 
 
    left: 300px; 
 
    margin-left:-25px; 
 
    width:200px; 
 
    height:100px; 
 
    border:solid 1px; 
 
} 
 

 
form > input#input_field { 
 
    width:200px; 
 
} 
 

 
.form-holder { 
 
    position: relative; 
 
}

<div id="wrapper"> 
 
    <div class="form-holder"> 
 
     <img src="https://i.imgur.com/4HDC0Vs.jpg" alt="header" width="500" height="906"> 
 
     <form id="form" action="#" method="post" name="result"> 
 
<td> 
 
    <input type="text" name="id" id="input_field" maxlength="200"/> 
 
</td> 
 
</form> 
 
    </div>

Answer 2

你在你的CSS一个很大的错误，以便它不适合形成规模，因为工作（宽，高），您必须在PX提正确的价值观，％，EM ..等根据您的喜好..

，并从那里你所提到的宽度HTML表单中删除的样式标签：200像素;对CSS宽度工作..

替换此代码..

width="104" height="142"; 

与这个..

width="104px" height="142px";