Youtube style search box

HTML & CSS
1

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.

Thanks

2

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

It’s actually a pretty complicated one I tried that already.

4

You can do something like this:


<!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.


#go{
[B]    text-transform:capitalise;/* ie hack to make text-indent work*/
text-indent:-999em;   [/B] 
width:50px;
    height:37px;
    line-height:27px;
 [B]   background:url(go.gif) no-repeat 0 0;[/B]
    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

Thanks Paul, great help!