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.
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
Then, style the input with CSS (basic styling), like so :
The last, jQuery script:
The HTML elements placement is the same, I only change the ID for the input element. I named it
The styling CSS is exactly the same, no changes.
Let's just see the script :
The demo of the two inputs, controlled with script
UpdateIf you do not want to automatically clear the text
Only clearing the image background on input