SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist TomTees's Avatar
    Join Date
    Apr 2010
    Location
    Iowa
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Text in Search Control

    There is a website I recently visited that have a "Search" control/field where you can search their website.

    What is neat about it, is that it has the words "Search Site" inside of the control.

    Moreso, it even has a little maginifying glass inside it like O-

    (Very clever!!)

    How do you do that?

    (It is a great way to save space for tiny spaces!!)


    TomTees

  2. #2
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are ways of doing that with CSS and JS, but the new-fangled HTML-only way of doing it (which isn't cross browser yet) is:
    <input type="search" placeholder="Search Site" />

  3. #3
    SitePoint Addict AtSea webdesign's Avatar
    Join Date
    May 2010
    Location
    Newark, Delaware
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I actually did the magnifying glass deal.

    Code:
    Search: <input id="UDSearchField" class="searchBox" name="q" size="24" onfocus='javascript: document.getElementById("UDSearchField").setAttribute("class", "");' onblur='javascript: document.getElementById("UDSearchField").setAttribute("class", "searchBox");' maxlength="256" value="" type="text" />

    and the css
    Code:
    #UDSearchField {font: 11px Arial, Helvetica, Verdana, sans-serif;height: 12px;margin: 4px 0 0 0;padding:2px 5px 3px;border: 1px solid #7F9DB9;outline-style: none;}
    .searchBox{background:url('/images/icon_magglass.gif') no-repeat; padding-left:20px;}
    essentially what happens is the mag glass is there until you click in the field.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •