asp.net dropdownlist remove arrow
asp.net dropdownlist have a default arrow. in this tutorial we see how can we remove that arrow from
dropdownlist. in asp.net there are no built in property to remove arrow from dropdownlist. so we need to take
help from css. just set the select -webkit-appearance value none. it will remove/hide arrow from dropdownlist.
put the css on document header area.
dropdownlist-remove-arrow.aspx
<%@ Page Language="C#" AutoEventWireup="true"%>
<!DOCTYPE html>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if(!Page.IsPostBack)
{
string[] birds = {
"Green Catbird",
"Golden Bowerbird",
"Great Bowerbird",
"Spotted Bowerbird",
"Satin Bowerbird"
};
DropDownList1.DataSource = birds;
DropDownList1.DataBind();
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>asp.net dropdownlist remove arrow</title>
<style type="text/css">
.select {
border:2px solid darkblue;
border-radius:5px;
-webkit-appearance: none;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2 style="color:MidnightBlue; font-style:italic;">
asp.net example - dropdownlist remove arrow
</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>

- How to make DropDownList first item not selectable
- How to display tooltip for DropDownList each items
- How to create a rounded corners DropDownList
- How to change DropDownList selected item text and background color
- How to change DropDownList arrow image
- How to sort DropDownList items by text
- How to sort DropDownList items by value
- How to check whether an item exists in a ListBox
- How to add attributes to a ListBox items
- How to set a default selected item in RadioButtonList