Can I css the inside of a search input field box with the word search?

Discussion in 'CSS' started by Mitchell, May 20, 2010.

0
  1. #1
    I have a search input field box that is blank, not even a blinking courser. I want by default to have some text and blinking courser already in the search input box that will disappear once the user clicks inside the box or starts typing.

    Is this possible?
    Can this be done without using JavaScript or anything complicated?

    Thanks.

    <!DOCTYPE html PUBLIC
    "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" media="screen" href="search.css" />
    <title>search</title>
    </head>

    <body>
    <div id="form">
    <form action="/search.php" method="post">
    <label id="sch"><input type="text" name="name" size="22" title="Subject"/></label>
    <p id="button"><input type="submit" value="Search:" /></p>
    </form>
    </div>
    </body>
    </html>
     
    Last edited: May 20, 2010
    Mitchell, May 20, 2010 IP
  2. timbolimbo

    timbolimbo Peon

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Try this, you can change the word search to whatever you wish:

    <input type="text" name="search" size="15" value="search" onblur="if(this.value=='') this.value='search';" onfocus="if(this.value=='search') this.value='';" />
     
    timbolimbo, May 21, 2010 IP
  3. unigogo

    unigogo Peon

    Messages:
    286
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #3
    This must be done in Javascript
     
    unigogo, May 21, 2010 IP
  4. timbolimbo

    timbolimbo Peon

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    This works for me as it is inside a form. Try it on its own in a plain html page and view in browser :)
     
    timbolimbo, May 21, 2010 IP
  5. Mitchell

    Mitchell Peon

    Messages:
    204
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Thanks for your replies.

    That seems to work for me. I thought JavaScript might be more involved than that.
     
    Mitchell, May 21, 2010 IP
  6. timbolimbo

    timbolimbo Peon

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    It won't function correctly if javascript is disabled in the user's browser, but the overwhelming majority would have no reason to do that. I use the code in my search box with google's Site Search - works beautifully :)
     
    timbolimbo, May 21, 2010 IP