Change Text and Arrow Color of ASP.Net DropDownList

Hi mailpound2023,

It is not possible to change the arrow color only.

If you change the color of Items, same color will be applied to arrow aswell.

So to achieve the output you need to add a transparent arrow image with your required color in you project and set the image in the background-image property.

Refer below code.

HTML

<style type="text/css">
    .DropDownList { font-size: 20px; color: darkblue; width:200px;         
            -webkit-appearance: none; -moz-appearance: none; appearance: none; 
            background-image: url('../DownArrow.png'); background-repeat: no-repeat; 
            background-position: right .7em top 50%; background-size: .65em auto; }
</style>
<asp:DropDownList runat="server" ID="ddlCustomers" CssClass="DropDownList">
</asp:DropDownList>

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[] {
            new DataColumn("Id"),
            new DataColumn("Name") });
        dt.Rows.Add(1, "John Hammond");
        dt.Rows.Add(2, "Mudassar Khan");
        dt.Rows.Add(3, "Suzen Mathews");
        ddlCustomers.DataSource = dt;
        ddlCustomers.DataTextField = "Name";
        ddlCustomers.DataValueField = "Id";
        ddlCustomers.DataBind();
    }
}

Screenshot