Some simple CSS tricks to show you how to change how your select dropdown box (showing select options can be changed)
First, the code (
http://www.devlib.org/samples/select1.html )
Code:
<html>
<head><title>Select Styles</title>
<style>
table { background: #cccccc; }
.blackborder { border: 2px solid #000000 }
.noborder { border: 0px }
.numbers { background: #dddddd; }
.alpha { background: #888888; }
</style>
</head>
<body>
<table width="200" bgcolor="#000000">
<tr><td>
<form>
2 px black border: <select name="abc" class="blackborder">
<option value="1">1</option>
<option value="2">2</option>
</select><br>
No border: <select name="abc" class="noborder">
<option value="1">1</option>
<option value="2">2</option>
</select><br>
Colored Options:
<select name="abc" class="coloredoption">
<optgroup Label="Numbers" class="numbers">
<option value="1">1</option>
<option value="2">2</option>
</optgroup>
<optgroup Label="Alpha" class="alpha">
<option value="a">a</option>
<option value="b">b</option>
</optgroup>
</select>
</form>
</td></tr></table>
</body>
</html>
We have three select dropdown boxes in this html snippet.
The first one has a 2 pixel black border which is done by this piece of code in the style.
Code:
.blackborder { border: 2px solid #000000 } The second select box has no border which is done by this piece of code.
Code:
.noborder { border: 0px } Finally, the last select box uses the optgroup tag to create a group, which is then styled with different backgrounds.
Code:
.numbers { background: #dddddd; }
.alpha { background: #888888; } Exceptions are documented below.
CSS Select Box / Border 
