更改ASP.NET下拉框的样式

Question

I have a default ASP.NET Dropdown, and it is rendered with a select tag id of "Countries".

I'd like the background of the drop-down to be transparent to match with the background of the page, and also like to keep make the default border disappear as well, so it blends well with the background. The list items can have the white background. I have an image of a custom arrow that i'd like to use instead of the default one that is used to click on the drop-down.

On hovering over the drop-down list items, I'd like the background of the item to be yellow, and the font color should always be black.

I'd like to use CSS 2.1 as much as possible for this, but if it's too complex then I'm willing to use javscript or jquery.

Below is the rendered markup, and some custom styles I've been trying to write. I also think some of the styles are overwritten by some default ones. Any help to finish this styling would be greatly appreciated. Thanks

<select name="ContriesDropdown" class="Select.SmallSelect" id="Countries" style="width: 100px; background-color: white;" onblur="try{FormUtils_ElementErrorReset(this);}catch(e){}" onchange="Send(this.value);">

<option value="1">Country1

<option value="2">Country2

*CustomCss*

#Countries {   position:absolute; display:inline; top:6px;}

#Countries {background-color:transparent; vertical-align: middle; color: #44586D; border: 0px transparent; display: inline;padding:2px;}

#Countries Option:hover { color:black; background-color:Yellow; }

Answer 1

The default ASP.Net controls are very limited when it comes to styling. You should try using external controls like the JQuery UI dropdown instead.

http://jqueryui.com/autocomplete/#combobox

Answer 2

Try This.

select
    {
        -webkit-appearance: button;
        -webkit-border-radius: 2px;
        -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
        -webkit-padding-end: 20px;
        -webkit-padding-start: 2px;
        -webkit-user-select: none;
        background-image: url(../images/select-arrow.png), -webkit-linear-    gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
        background-position: center right;
        background-repeat: no-repeat;
        border: 1px solid #AAA;
        color: #555;
        font-size: 10pt;
        margin: 0;
        overflow: hidden;
        padding-top: 2px;
        padding-bottom: 2px;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-family: Cambria;
    }