Further to my comment above, here's some code that demonstrates a possible solution.
Tested in Chrome.
<!DOCTYPE html>
<html>
<head>
<style>
#searchHint
{
z-index: -1;
position: absolute;
}
#searchBox
{
background-color: rgba(0,0,0,0);
}
</style>
<script>
function byId(e){return document.getElementById(e);}
function myInit()
{
var src = byId('searchBox');
var x,y,w,h;
w = src.clientWidth;
h = src.clientHeight;
x = src.offsetLeft;
y = src.offsetTop;
var tgt = byId('searchHint');
tgt.style.left = x + 'px';
tgt.style.top = y + 'px';
tgt.style.width = w + 'px';
tgt.style.height = h + 'px';
}
function checkValue(element, tgtIdStr)
{
var src, tgt=byId(tgtIdStr);
src = element;
if (src.value == '')
tgt.style.display = '';
else
tgt.style.display = 'none';
}
</script>
</head>
<body onload='myInit();'>
<input id='searchBox' onkeyup='checkValue(this, "searchHint");'/>
<div id='searchHint'>Enter Search</div>
</body>
</html>