Monkey Raptor

This is the "enhancement" of my earlier post about using "Results Only" template for Google Custom Search Engine (GCSE) for your blog. You can read it, step by step on how to implement the GCSE : Results Only, right there.

This post is focused on controlling the input element text and GCSE logo, nothing more

I'm gonna show you how to clear the text and the background image if the input element is being clicked (and focused) by user and all the thing you saw on standard website. Like, wut? Yeah man, my blog isn't standard. Haa.

Anyway, this needs some short front-end script.
I wrote two examples, one for jQuery (if you use jQuery library on your page) and the other is using JavaScript (without any library, vanilla).

---

jQuery
First of all, define the input HTML element (wrapped with form element and a div). This one is a nonworking search input. You can read some more how to make it work on the post link above. This one is only for customizing the input element behavior.
The input ID is monkeyOne.
<div style='text-align:center;'> <form action=''> <input id='monkeyOne' size='20' type="text" title='type to search'> </form> </div>

Then, style the input with CSS (basic styling), like so :
input#monkeyOne { padding: 5px 10px; background-image: url('http://www.google.com/cse/images/google_custom_search_watermark.gif'); background-repeat: no-repeat; background-position: 2px; }

The last, jQuery script:
//the background image URL var backgroundURL = 'http://www.google.com/cse/images/google_custom_search_watermark.gif'; //the behavior on click and focus events $('#monkeyOne').bind('click focus', function () { $(this).css('background-image', 'none').val(''); }); //the behavior on blur (user clicks away) event $('#monkeyOne').blur(function () { if ($(this).val().length !== 0) { $(this).css('background-image', 'none'); } else { $(this).css("background-image", "url(" + backgroundURL + ")"); } });

---

JavaScript
The HTML elements placement is the same, I only change the ID for the input element. I named it monkeyTwo.
The styling CSS is exactly the same, no changes.
Let's just see the script :
//the background image URL and the input ID var backgroundURL = 'http://www.google.com/cse/images/google_custom_search_watermark.gif', inp = document.getElementById('monkeyTwo'); //the behavior on click and focus events inp.onclick = inp.onfocus = function () { inp.style.backgroundImage = "none"; inp.value = ""; } //the behavior on blur event inp.onblur = function () { if (inp.value.length !== 0) { inp.style.backgroundImage = "none"; } else { inp.style.backgroundImage = "url(" + backgroundURL + ")"; } }

---

---

Update

If you do not want to automatically clear the text
Only clearing the image background on input

---

jQuery
//the background image URL var backgroundURL = 'http://www.google.com/cse/images/google_custom_search_watermark.gif'; //the behavior on click and focus events $('#monkeyOne').bind('click focus', function () { $(this).css('background-image', 'none'); }); //the behavior on blur (user clicks away) event $('#monkeyOne').blur(function () { if ($(this).val().length !== 0) { $(this).css('background-image', 'none'); } else { $(this).css("background-image", "url(" + backgroundURL + ")"); } });

---

JavaScript
//the background image URL and the input ID var backgroundURL = 'http://www.google.com/cse/images/google_custom_search_watermark.gif', inp = document.getElementById('monkeyTwo'); //the behavior on click and focus events inp.onclick = inp.onfocus = function () { inp.style.backgroundImage = "none"; } //the behavior on blur event inp.onblur = function () { if (inp.value.length !== 0) { inp.style.backgroundImage = "none"; } else { inp.style.backgroundImage = "url(" + backgroundURL + ")"; } }

---