Search box

HTML & CSS
1

what should be the right markup and CSS for the attached annotated searchbox.?

2

Hi,

I guess 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>

The measurements should be ems if used in a fluid with layout. However depending on user settings and browsers the alignment is likely to be a few pixels off in various browsers (as with that example you posted).

If you wanted it perfect than I would wrap a span around each of those elements and style the spans instead of the inputs and they will likely be perfect cross browse. Then just set the borders to none and background to transparent for the inputs and just let them show the text on top of the spans background. In that way a few pixels difference will not notice. It depends on whether you want to add extra markup or not. The best choice would be to separate the input and submit so that size isn’t critical.

3

Thanks a lot!