PDA

View Full Version : how to make search input like google image?



toplisek
Aug 14th, 2009, 10:07 AM
I like google search input and image inside.
How to make this with my code within input?


I enclose just sample how is seen.

noneforit
Aug 14th, 2009, 10:21 AM
Maybe try googling the answer?

http://www.google.co.uk/coop/cse/

_Aerospace_Eng_
Aug 14th, 2009, 10:31 AM
Maybe try googling the answer?

http://www.google.co.uk/coop/cse/

I think the OP wanted to use their own image with their own search feature. If they are wanting to use google as their search on their site then yes you are right. If they don't then the explanation and code below should suffice.

Well first you need the background image. Obviously. This can be done in modern browsers including IE7+ without using javascript but you will need to check and see if the user puts in any text. If they do then leave the background image off, if they don't then leave the background image on. Ironically this is what makes this work in IE6. The user will get a similar effect with javascript disabled however once the user focuses the input box the background image will go away and even if they put in text the background image will remain there once the user leaves the text box.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
input.input {
background:url(search.png) no-repeat;
height:25px;
margin:0;
padding:0;
border:1px solid #000;
}
input.input:focus {
background:none;
}
</style>
</head>

<body>
<form>
<input type="text" class="input" onFocus="if(this.value == '') this.style.backgroundImage = 'none';" onBlur="this.style.backgroundImage = (this.value != '') ? 'none' : 'url(search.png)';">
</form>
</body>
</html>

toplisek
Aug 14th, 2009, 10:38 AM
Hi it works perfect. just do not understand your quote:
with javascript disabled however once the user focuses the input box the background image will go away and even
if they put in text the background image will remain there once the user leaves the text box.

Q: What does it mean focuses the input box? Means all the time if they put inside text it will background stay there?

_Aerospace_Eng_
Aug 14th, 2009, 10:52 AM
No in modern browsers including IE7+ the background image will go away if they click inside of the input box but once they leave the input box it will no go away. It will stay there. Again thats IF javascript is disabled.