Difficulty in Styling ASP DropDownList

See more:

C#

ASP.NET

Javascript

CSS

hi all,

does anyone know how can I style a asp dropdownlist? The arrow of the dropdown is difficult to change, this is how it looks like initially:
http://i.stack.imgur.com/n9MFy.png[^]

Does anyone has any solution to fix or style this asp dropdownlist?
This is my code: (I could not change this into select dropdownlist because my dropdownlist options are being populated dynamically based on selection from a listbox)

//asp file
            <asp:DropDownList ID="NewDropDownList" runat="server" Width="136px" OnSelectedIndexChanged="jobRun_SelectedIndexChanged" AutoPostBack="True" >  
            </asp:DropDownList>

//cs file
 public void BindNewDropDownList()
        {
                        //Lost to hold the values
                        List<DateTime> listCopy = new List<DateTime>();
                        DateTime dt;
                        string values = String.Join(", ", JOBRUN_CBL.Items.Cast<ListItem>().Where(i => i.Selected).Select(i => i.Text));
                        if (values.Contains("Select All"))
                        {
                            //Loop through each items in listbox and then add it to list
                            foreach (ListItem li in ListBox1.Items)
                            {
                                if (DateTime.TryParse(li.Text, out dt))
                                {
                                    listCopy.Add(dt);
                                }
                            }
                        }
                        else
                        {
                            //Loop through each items in listbox and then add it to list
                            foreach (ListItem li in ListBox1.Items)
                            {
                                //check if item is selected
                                if (li.Selected == true)
                                {
                                    //add items to list
                                    listCopy.Add(DateTime.Parse(li.Text));
                                }
                            }
                        }

                        //compare and sort so that the latest date comes on top
                        listCopy.Sort((x, y) => y.CompareTo(x));
                        //clear the items in dropdownlist
                        NewDropDownList.Items.Clear();
                        //set the datasource to dropdownlist
                        NewDropDownList.DataSource = listCopy;
                        //set the dateformatstring in dropdownlist
                        NewDropDownList.DataTextFormatString = "{0:dd-MMM-yyyy}";
                        //Bind the dropdownlist
                        NewDropDownList.DataBind();
}

This is what I have tried but the same dropdown arrow is still there even though I added in a background image:

<asp:DropDownList ID="NewDropDownList" runat="server" Width="136px" OnSelectedIndexChanged="ddl_SelectedIndexChanged" AutoPostBack="True" CssClass="ddl" xmlns:asp="#unknown">
           </asp:DropDownList>

.ddl{
    width: 268px;
    padding: 5px;
    font-size: 16px;
    line-height: 1;
    background-color:lightblue;
    color:black;
    border-color:blue;
    border: 0;
    border-radius: 5px;
    height: 34px;
    background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right lightblue;
    -moz-appearance: none; /*FF*/
    -webkit-appearance: none;  /*Chrome, Safari*/
    appearance: none;
    background-position-x: 244px;
    border:solid 1px #ddd;
}

This is the output I get currently based on what I have tried:
http://i.stack.imgur.com/n9s0C.png[^]
Please help me on this, been finding solution for this for quite sometime but still cannot find a way to decorate it.

Thanks.