This replicates the functionality of the standard embeddable Google Search fields. They have an image in the background and when the input is clicked into, the image disappears.
<form name="searchform" id="search-form">
<div>
<b>Search</b>
<input type="text" name="txtInput" title="Enter the terms you wish to search for." />
<input type="submit" value="GO!" class="submit" style="cursor: pointer;" />
</div>
</form>
JavaScript underneath form markup:
<script type="text/javascript" language="javascript">
(function() {
var id = document.getElementById('search-form');
if (id && id.txtInput) {
var name = id.txtInput;
var unclicked = function() {
if (name.value == '') {
name.style.background = '#FFFFFF url(images/googbg.png) left no-repeat';
}
};
var clicked = function() {
name.style.background = '#ffffff';
};
name.onfocus = clicked;
name.onblur = unclicked;
unclicked();
}
})();
</script>
Exactly what I was looking for. Thanks.
thats actually nice
i like it better than default text in the box :- )
thanks
I have a problem with making this work with a login form.
If the user returns to the login page, their username and password will be automatically filled in for them. Unfortunately, the script isn’t recognizing this, so their credentials end up being displayed over the unclicked background-image.
Any idea how to remedy this?
James, you asked EXACTLY the question that I am struggling with.
Did you find a solution?
I have the same problem as James
When index page is opened, it should display three images and disappear in 10 to 15 seconds. Please help me.
Thank you!
A simple solution to a common problem.
Much appreciated!
how i can change position image to center?
Thanks! It’s great :)
Why not?
Only CSS.
Lashchevsky, thank you! That worked perfectly. I added a red border and color background to highlight the field. Looks great!
Lashchevsky, +1! No js – css only..
Either background image on input like
or wrap input with div {position:relative} and place a real ‘img’ inside like that:
Enjoy some jsFiddle http://jsfiddle.net/y38n947h/