Estilo con CSS para un Ajax ComboBox de ASP.net

Como Modificar el estilo de un ASP.net ComboBox de Ajax Utilizando CSS

En este Post compartiré con ustedes la forma de dar estilos propios a un ComboBox de Ajax, utilizando CSS.  De tal manera que podamos pasar de esto:

a esto

Suponiendo que a este punto tenemos nuestro proyectos de Visual Studio, tenemos una pagina en la cual ya hemos agregado un Combobox de Ajax, tambien tenemos una hoja de estilos agregada a nuestro proyecto.

Si la hoja de estilos aun no esta ligada a la pagina en la cual tenemos el ComboBox, solo es cuestión de arrastrar el archivo .cs a nuestra pagina para crear el link automáticamente.

Al elemento ComboBox le asignamos la propiedad CssClass a combobox.

En nuestra hoja de estilos agregamos las siguientes lineas:

.combobox .ajax__combobox_textboxcontainer input
{
    height:20px;
    background-image:url('../Imagenes/combo.png');
    background-repeat:no-repeat;
    border-style:none;
    padding-top:7px;
    background-color:#fafafa;
    padding-left:5px;
}

.combobox .ajax__combobox_buttoncontainer button
{
    background-image:url('../Imagenes/combo.png');
    background-repeat:no-repeat;
    background-position:-206px 0;
    border-style:none;
    background-color:#fafafa;
     cursor:hand;
}

.ajax__combobox_itemlist
{
    white-space: nowrap;
    cursor:hand;

    border-color:#BBC2CC;
    border-style:solid;
    border-width:2px;

    width:200px !Important;
}

Ya solo nos falta agregar la imagen a nuestra carpeta Imagenes..
(Para descargar la imagen hacer Click Derecho > Guardar imagen como…)

Espero les sea de utilidad el post, y como siempre, se agradecerán todos los comentarios.