Script.aculo.us Select Box

Example

HTML

					
<select id="options" name="options">
	<option value="1">option 1</option>
	<option value="2">option 2</option>
	<option value="3" selected="selected">option 3</option>
	<option value="4">option 4</option>
</select>

JavaScript

					
new Autocompleter.SelectBox('options');

CSS

div.autocomplete {
  position:absolute;
  width:400px;
  background-color:white;
  border:1px solid #ccc;
  margin:0px;
  padding:0px;
  font-size:0.8em;
  text-align:left;
  max-height:200px;
  overflow:auto;
}
div.autocomplete ul {
  list-style-type:none;
  margin:0px;
  padding:0px;
}
div.autocomplete ul li.selected { 
  background-color: #EAF2FB;
}
div.autocomplete ul li {
  list-style-type:none;
  display:block;
  margin:0;
  padding:2px;
  cursor:pointer;
}

.combo /* look&fell of scriptaculous select box*/
{
  margin: 0px 5px 10px 0px;
  font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size:0.8em;
  width : 10em; 
  display : block;
  text-align:left; 
  background: url('../images/bg_select.jpg') right;
  height:18px;
  cursor: pointer;
  border:1px solid #ccc;
  color:#999;
}

That's all, you can get all select boxes you need

Another example with another CSS class to demonstrate multiple styles on the same page