In need of adding default text into the search bar

  • Hi folks
    A quick question in order to modify my search bar.
    It is currently empty without default text, followed by the “Go” click button. I wanna modify it so I can have “Search here” as default. I want it to go away when the mouse is pointing at it and reappear when the mouse points outside of the search area.

    Here is my searchform.php code:

    <form role=”search” method=”get” class=”search-form” action=”<?php echo esc_url( home_url( ‘/’ ) ); ?>”>
    <span class=”screen-reader-text”><?php _ex( ‘Search for:’, ‘label’, ‘preferentiallite’ ); ?></span>
    <div class=”input-group”>
    <input type=”text” class=”form-control” value=”<?php echo esc_attr( get_search_query() ); ?>” name=”s”>
    <span class=”input-group-btn”>
    <button class=”btn btn-grey” type=”submit” value=”<?php echo esc_attr_x( ‘Search’, ‘submit button’, ‘preferentiallite’ ); ?>”><?php _e( ‘Go!’, ‘preferentiallite’ ); ?></button>
    </span>
    </div><!– /input-group –>
    </form>

    Thanks folks.

Viewing 3 replies - 1 through 3 (of 3 total)

  • You only need this small change:

    <input type="text" class="form-control" value="<?php echo esc_attr( get_search_query() ); ?>" name="s" placeholder="Search Here">

    It’s the placeholder="Search Here" that’s been added. That adds in the placehodler text that appears when the field is empty.

    Thread Starter plantwho

    (@plantwho)

    Thanks heaps. Cata!

    It works wonder.

    However, is there a way to make “Search here” disappear when your mouse points at it, and make it reappear when your mouse points away from the search box, as I mentioned in my first post?

    Not that I know of.

    If you need something that has more or different functionality you’d have to look at some custom JavaScript programming to do it. What’s there now is the standard HTML default for pretty much every browser.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘In need of adding default text into the search bar’ is closed to new replies.