Watermark search textbox on Blogger theme

Posted on 2012-08-19
Last Modified: 2012-09-11
Is there a way to add a watermark to the textbox for the default search "gadget" from Blogger?

Here's my test site:

I'm using CSS to hide the submit button, so you can just type and press enter to submit. The client wants the textbox to be watermarked "Type + Search" and I can't figure out how to do it...

I was playing around with something like:

<script src="" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
 var watermark = 'Type + Search';
  if ($(this).val().length == 0)
  if ($(this).val() == watermark)

Open in new window

(Taken from here:

But it doesn't seem to be working ... any ideas?!
Question by:mandi224
    LVL 52

    Accepted Solution

    All you need to do is add placeholder to the input

    <input type="text" name="textfield" id="textfield" placeholder="some text">

    Author Comment

    Unfortunately, I don't believe I can edit the input tag in the new blogger theme format? The gadget/widget for search seems to get inserted automatically in the theme here:

    <b:widget id='CustomSearch1' locked='false' title=' ' type='CustomSearch'>

    So I can't add "placeholder" to the input element.
    LVL 52

    Expert Comment

    by:Scott Fell, EE MVE
    Ok, what you have seems to work fine in jsfiddle.  I did notice the rendered html has,  class=" gsc-input".  I wonder if the space before gsc has something to do with it.  Can you try class="gsc-input".

    Another option would be to try to change



    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Threat Intelligence Starter Resources

    Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

    Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
    Using SQL Scripts we can save all the SQL queries as files that we use very frequently on our database later point of time. This is one of the feature present under SQL Workshop in Oracle Application Express.
    This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
    The viewer will learn how to count occurrences of each item in an array.

    794 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    16 Experts available now in Live!

    Get 1:1 Help Now