Need Help with styling a dropdown search box.

[maburker]

Hello,

    I hope someone can give me a basic idea of how to style a drop down search box. I am not a pro at css so, with that in mind......

The following is the search box code that I picked up on a tutorial.

 

<div id="main-search">
<form action="" method="get" class="search">
        <label for="headerSearch">Search:</label>
        <input type="hidden" name="mod" value="search" class="searchSelect" />
        <select name="source" class="searchSelect">
          <option value="People">People</option>
<option value="Blogs">Blogs</option>
<option value="Views">Views</option>
<option value="Groups">Groups</option>
<option value="Groups Forums">Groups Forums</option>
<option value="Companies">Companies</option>
<option value="Meetups">Meetups</option>
<option value="Help">Help</option>
<option value="Google">Google</option>
        </select>
        <div id="search-bar">
        <input name="q" value='Search Coming Soon' class="search-style" />
        <input type="submit" value="Search" class="searchSubmit" />
      </form>
    </div></div>

You'll notice that I tried to add the css to it to create a search bar similar to myspaces. Their search bar has the options and input box combined. Of course I couldn't figure out how to align the options, search bar input, and the search button. I looked on every tutorial but, couldn't find anything that helped. If I leave the form plain then it aligns fine but, really generic. It also creates a space between the options, input box, and the search submit button. If I showed you the css markup for this you might laugh and it's no help either. Any help is appreciated. If someone could show me a generic css markup that could help alot.

[maburker]

I was able to get the search bar some what but, still unhappy with what I have. Like I mentioned I am not a pro so, some help would be great with this.

Below is what I wrote for the css:

 

#main-search{
        float:right;
        width: 360px; 
        margin:0 auto; 
        margin-top: 13px;
        margin-right: 300px;
        position:relative;
}
#main-search .searchSelect {
        float:left;
        background: transparent;
        width: 0 auto;
        padding:0; 
        margin-top: 0px; 
        border:1px solid #fff;
        display:inline-block;
        position:relative;
        color: #fff;
}
.searchForm {
      margin: 0;
      padding: 0;
      color: #000;
}
.search-style{
        background: transparent;
        width:150px;
        font-size: 11px;
font-weight:normal;
font-family: Arial;
        color:#fff; 
        border:1px solid #fff;
        padding: 2.5px;
        margin: 0;
        
}
.searchSubmit {
background: url(../images/search.gif) no-repeat;
border:none;
cursor:pointer;
width: 92%;
width:14px;
}

 

Below is the html:

<div id="main-search">
<form action="" method="get" class="searchForm">
        <input type="hidden" name="demo" value="search" class="searchSelect" />
        <select name="source" class="searchSelect">
          <option value="People">People</option>
<option value="Blogs">Blogs</option>
<option value="Views">Views</option>
<option value="Groups">Groups</option>
<option value="Groups Forums">Groups Forums</option>
<option value="Companies">Companies</option>
<option value="Meetups">Meetups</option>
<option value="Help">Help</option>
<option value="Google">Google</option>
        </select>
        <input name="q" value="Search Coming Soon..." onfocus="this.value=(this.value=='Search Coming Soon...') ? '' : this.value;" onblur="this.value=(this.value=='') ? 'Search Coming Soon...' : this.value;" class="search-style" />
        <input type="submit" value="" class="searchSubmit" />
      </form>
    </div>

If you look at the image below you'll see the out come.

http://s587.photobucket.com/albums/ss315/familyguy_1928/?action=view&current=searchbox.png

 

However, I would like to put the drop down box and the search input together as one. Similar to myspace.com and a million other sites. I am not sure how the css or html markup should be. My current css and html markup is current to ie and ff.