Style Select Box

Style Select Box

by Emmanuel Garcia

HTML

<select name="selResort" style="width:400px" onmousedown="if(this.options.length>15){this.size=15;}" onchange='this.size=0;' onblur="this.size=0;" >
						<option  >Select a Resort</option>
						  <optgroup   class="uno"label="RESORTS IN THE UNITED STATES">
						  <option <? if($_GET['resortID']==8) { echo 'selected'; } ?> value="8">Sandcastle at Birch Bay</option>
						  <option <? if($_GET['resortID']==154) { echo 'selected'; } ?> value="154">Teton Club</option>
						  <option <? if($_GET['resortID']==12) { echo 'selected'; } ?> value="12">Kona Reef</option>
						  <option <? if($_GET['resortID']==6) { echo 'selected'; } ?> value="6">Cimarron Golf Resort</option>
						  <option <? if($_GET['resortID']==4) { echo 'selected'; } ?> value="4">The Miners Club</option>
                           <option <? if($_GET['resortID']==20) { echo 'selected'; } ?> value="20">The River Club</option>
						  <option <? if($_GET['resortID']==10) { echo 'selected'; } ?> value="10">WorldMark Phoenix South Mountain Preserve</option>
						  <option <? if($_GET['resortID']==22) { echo 'selected'; } ?> value="22" >Franz Klammer Lodge</option>
						  <option <? if($_GET['resortID']==16) { echo 'selected'; } ?> value="16" >Park Plaza</option>
						  <option <? if($_GET['resortID']==14) { echo 'selected'; } ?> value="14" >Polo Towers</option>
						   </optgroup>
							  <optgroup  class="dos" label="RESORTS IN MEXICO">
						  <option <? if($_GET['resortID']==32) { echo 'selected'; } ?> value="32">Club Regina Puerto Vallarta</option>
						  <option <? if($_GET['resortID']==30) { echo 'selected'; } ?> value="30">Club Regina Los Cabos</option>
						  <option <? if($_GET['resortID']==2) { echo 'selected'; } ?> value="2">Club Regina Cancun</option>
                           <option <? if($_GET['resortID']==42) { echo 'selected'; } ?> value="42">Casa Divina Oaxaca</option>
						  <!--  <option <? if($_GET['resortID']==38) { echo 'selected'; } ?> value="38">Villa Vera Puerto...

CSS

select option uno{
    background: rgba(0,49,89,0.7);
    color:red;
    text-shadow:0 1px 0 rgba(0,0,0,0.4);
}

select option[val="12"]{
    background-color:red;
}

select option[val="2"]{
    background: rgba(0,49,89,0.3);
}   
.uno { background-color:#002e59; color:#fff; padding-top:5px;  padding-bottom:5px;}
.dos { background-color:#D8D8D8; color:#333; padding-top:5px;  padding-bottom:5px;}
.tres { background-color:#ff6a18; color:#fff; padding-top:5px;  padding-bottom:5px;}