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.
It is important not to change the structure of the input being inside the absolute container which has its overflow hidden
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.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;
}
</style>
</head>
<body>
<div class="inputOverGateContainer"><input class="inputOverGate" name="" type="text"></div>
</body>
</html>
You need to remove the height declaration for the
.inputOverGateclass. I have updated your fiddle demonstrating: http://jsfiddle.net/V66ts/1/