See here: http://jsfiddle.net/zemar (Must use Firefox or Opera to see)
When you click on the select, the drop-down is styled to match, but if you start
From the best of my knowledge you cannot style the tag. I recommend using the JQuery extension autocomplete. So you're need to include JQuery in your html document. here is a link hosted by Google: See here
Note: you can get better performance by including this at the end of the document and using $(document).ready();
For example:
HTML:
Javascript:
$(document).ready(function() {
var arrayOfOptions = [
"Option 1",
"Option 2",
"etc"
];
$("#input").autocomplete({source: arrayOfOptions});
});
note: not tested code!
Source: http://jqueryui.com/autocomplete/
You can style this similarly to how you style a nav. Here are some classes you can style:
.ui-autocomplete span.hl_results {background-color: #ffff66;}
.ui-autocomplete-loading {} //the object while it's loading (in the event of Ajax, in this case would not need this one
.ui-autocomplete {
max-height: 250px;
overflow-y: auto;
overflow-x: hidden;
padding-right: 5px;
}
.ui-autocomplete li {font-size: 16px;}
html .ui-autocomplete {
height: 250px;
}