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
.
Then, style the input with
CSS (basic styling), like so :
The last,
jQuery script:
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 demo of the two inputs, controlled with script
Update
If you do not want to automatically clear the text
Only clearing the image background on input
jQuery
JavaScript
The demo
No comments:
Post a Comment
Tell me what you think...