SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot Yizi's Avatar
    Join Date
    Jan 2008
    Location
    Manchester, UK
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Youtube style search box

    Hi there,

    I'm trying to replicate the search box and button from Youtube and modifying it a little, it's basically what I was planning to code and came across the Youtube one.

    Screen Shot 2011-12-09 at 16.01.44.png

    Thanks

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Did you know that you can right click on an element and choose Inspect Element in browsers like Chrome and Firefox (with Firebug installed) and view all the CSS styles that apply to that element? It's a very handy way to learn how styling is done.

  3. #3
    SitePoint Zealot Yizi's Avatar
    Join Date
    Jan 2008
    Location
    Manchester, UK
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's actually a pretty complicated one I tried that already.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    You can do something like this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    #form1 {
        padding:20px;
        background:#fcf;
        width:520px;
        overflow:hidden;
    }
    #form1 label, #form1 input {
        float:left;
        padding:0 10px 0 0;
    }
    #search{
        width:300px;
        height:35px;
        line-height:35px;
        background:#fff;
        border:1px solid #000;
        margin:0;
        border-right:none;
        font-weight:bold;
    }
    #go{
        text-transform:uppercase;
        width:50px;
        height:37px;
        line-height:27px;
        background:#fcc;
        border:1px solid #000;
        margin:0;
        text-align:center;
    }
    #form1 label {
        width:100px;
        text-align:right;
        padding:0 10px 0 0;
        line-height:37px;
        font-weight:bold;
    }
    </style>
    </head>
    <body>
    <form id="form1" name="form1" method="post" action="">
        <fieldset>
        <legend>Search</legend>
        <label for="Search">Search:</label>
        <input type="text" name="Search" id="search">
        <input type="submit" name="Go" id="go" value="Go">
        </fieldset>
    </form>
    </body>
    </html>
    If you need an image for the submit button then apply a background image to it instead of the text like this.

    Code:
    #go{
        text-transform:capitalise;/* ie hack to make text-indent work*/
    text-indent:-999em;    
    width:50px;
        height:37px;
        line-height:27px;
        background:url(go.gif) no-repeat 0 0;
        border:1px solid #000;
        margin:0;
        text-align:center;
    }
    Obviously text-indent is not the most accessible method of hiding text but other methods of image replacement will require extra elements where inputs are concerned. The text-indent allows the input value to stay in place for accessibility. Of course if images are missing you get nothing unlike the link I just posted above.

    A word of warning though in that form controls differ wildly cross browser and usually its best not to force them into tight spaces as text-resize or browser differences can break then quite easily.

  5. #5
    SitePoint Zealot Yizi's Avatar
    Join Date
    Jan 2008
    Location
    Manchester, UK
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul, great help!


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
  •