Tal vez esto te sirva, el uso del
optgroup se podría definir como "tag perdido" para empezar me imagino que ya tienes tu form y tu select, para esto en el select vamos a definir en
optgroup lo que queremos dividir : ejemplo :
Código HTML:
<form id="form1" name="form1" method="post" action="">
<select name="listItem" id="listItem">
<optgroup class="galerias" label="Galerías CSS">
<option>Style Crunch</option>
<option>CSS Manía</option>
<option>CSS Remix</option>
</optgroup>
<optgroup class="correo" label="Servicios de correo">
<option>Gmail</option>
<option>Yahoo</option>
<option>Hotmail</option>
</optgroup>
</select>
</form>
Ahora nos vamos con la css, a cada optgroup le asignamos una clase para así poder customizar el color y todo lo que creas necesario:
Código:
#listItem {
font:12px Arial, Helvetica, sans-serif;
width:200px;
background-color:#FFF;
border:1px solid #DDD;
}
#listItem optgroup option {
padding:3px 0px 3px 15px;
border-bottom-width:1px;
border-bottom-style:solid;
}
#listItem optgroup.galerias {
background-color:#e6e6c2;
color: #919245;
}
#listItem optgroup.correo {
background-color:#c2e1e6;
color:#336699;
}
#listItem optgroup.galerias {
border-bottom-color:#8e8e83;
}
Con eso te debería quedar, iba a poner screenshot de como quedaba, pero todavía no tengo los permisos