0

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:

enter image description here

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();
}

Please help me on this, been finding solution for this for quite sometime but still cannot find a way to decorate it.

Thanks.

Nic
  • 1,014
  • 7
  • 15
Felicia Soh
  • 815
  • 3
  • 18
  • 32
  • What are you trying to change for the "drop down" ? Do you have any image for the Arrow ? – Nic Oct 28 '15 at 07:04
  • hi @Nic, I am trying to change the backcolor and the arrow for the asp dropdown list. It is just a general question on how to change the backcolor and the arrow of the ddl. Could be any arrow image for the arrow like this: http://i.stack.imgur.com/y1T4N.gif. Thanks! – Felicia Soh Oct 28 '15 at 08:12
  • Then i think the duplicate link will help you on this.. – Nic Oct 28 '15 at 08:23

1 Answers1

0

you can easily style your DropDownList

here are some articles which me be helpful for you

https://wisdmlabs.com/blog/customize-drop-down-list-using-css/

https://css-tricks.com/dropdown-default-styling/

http://www.htmllion.com/default-select-dropdown-style-just-css.html

FYI all the ASP.NET controls are converted into HTML tags when rendered in Browser, so you not need any special styling for DropDownList. you style for SELECT element will work for DropDownList to.

regards,

Virendra Yadav
  • 652
  • 8
  • 18