title: How to stop textbox moving inside its container in WebKit
body: <p>If you click inside the textbox, hold the mouse button and start dragging up and down, the textbox will move inside the container. The problem is in WebKit only.</p>
  
  <p><strong>It is important not to change the structure of the input being inside the absolute container which has its overflow hidden</strong></p>
  
  <p><a href="http://jsfiddle.net/V66ts/" rel="nofollow">http://jsfiddle.net/V66ts/</a></p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  
  &lt;style type="text/css"&gt;
  .inputOverGateContainer
  {
      top:0px;
      width: 100px;
      height: 22px;
      background-color: transparent;
      position: absolute;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      -khtml-border-radius: 10px;
      border-radius: 10px;
      overflow: hidden;
      z-index: 5;
      padding-left:3px;
      padding-right:3px;
       -webkit-touch-callout: text;
      -webkit-user-select: text;
      -khtml-user-select: text;
      -moz-user-select: text;
      -ms-user-select: text;
      user-select: text;
  
  }
  
  .inputOverGate
  {   
  
      font-size:17px;
      background-color: #fff;
      border: 1px solid #000;
      outline: none;
      width: 100%;
      height: 100%;
      color:#8292b4;
      text-shadow: 1px 1px 3px #000;
      -webkit-touch-callout: text;
      -webkit-user-select: text;
      -khtml-user-select: text;
      -moz-user-select: text;
      -ms-user-select: text;
      user-select: text;
  
  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="inputOverGateContainer"&gt;&lt;input  class="inputOverGate" name="" type="text"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>