How to change DropDownList arrow image in asp.net

asp.net dropdownlist change arrow image
this is a most asked question in asp.net developer community that how to change dropdownlist arraow image. i search on internet to solve this problem. but i got very few tutorials about that. so i write a tip about that topics.

in asp.net dropdownlist there are no built in feature/property to change it's arrow image. so we need to take help from core css. just set the select css value for background url, background repeat, background position etc. put this css on document header section.
dropdownlist-change-arrow-image.aspx

<%@ Page Language="C#" AutoEventWireup="true"%>    
      
<!DOCTYPE html>
        
<script runat="server">  
    protected void Page_Load(object sender, EventArgs e)  
    {   
        if(!Page.IsPostBack)  
        {  
            string[] birds = {   
                                 "Rufous Scrubbird",  
                                 "Brown Treecreeper",  
                                 "Orange-crowned Fairy-wren",  
                                 "Variegated Fairy-wren",  
                                 "Splendid Fairy-wren"  
                             };  
  
            DropDownList1.DataSource = birds;  
            DropDownList1.DataBind();  
        }  
    }  
</script>        
        
<html xmlns="http://www.w3.org/1999/xhtml">        
<head id="Head1" runat="server">        
    <title>asp.net dropdownlist change arrow image</title>  
    <style type="text/css">  
        .select {  
            border:2px solid orangered;
            color:darkblue;
            border-radius:5px;
            -webkit-appearance: none; 
            background:url("arrow.png");
            background-position:right;
            background-repeat:no-repeat;
            font-family:'Comic Sans MS';
        }  
    </style>  
</head>        
<body>        
    <form id="form1" runat="server">        
    <div>        
        <h2 style="color:MidnightBlue; font-style:italic;">        
            asp.net example - dropdownlist change arrow image
        </h2>        
        <hr width="550" align="left" color="Gainsboro" />        
        <br /><br />  
        <asp:DropDownList  
            ID="DropDownList1"  
            runat="server"  
            AutoPostBack="true"  
            Width="350"  
            Font-Size="X-Large"  
            CssClass="select"  
            >  
        </asp:DropDownList>  
    </div>        
    </form>        
</body>        
</html>
More asp.net examples