How to remove the dropdownlist arrow in asp.net?

Question

How can i remove the arrow at dropdownlist show in asp.net,i dont want the arrow because i want use my own image to create a fancy look for dropdownlist.

 <asp:DropDownList ID="cboLang" Runat="server" AutoPostBack="True" onselectedindexchanged="cboLang_SelectedIndexChanged" Font-Size="XX-Small" Width="95" Height="26" >
                        <asp:ListItem Value="EN-US">ENGLISH</asp:ListItem>
                        <asp:ListItem Value="ZH-CN">&#20013;&#25991;</asp:ListItem>
                        <asp:ListItem Value="TH-TH">&#3616;&#3634;&#3625;&#3634;&#3652;&#3607;&#3618;</asp:ListItem>
                        <asp:ListItem Value="EN-IE">ti&#7871;ng Vi&#7879;t</asp:ListItem>
                        <asp:ListItem Value="EN-TT">Korean</asp:ListItem>
                        <asp:ListItem Value="EN-AU">Indo</asp:ListItem>
                        </asp:DropDownList>

score 5 · Answer 1 · answered Aug 15 '14 at 21:58

you can add cssClass to your dropdown cssClass="select" like :

<asp:DropDownList ID="cboLang" Runat="server" cssClass="select" AutoPostBack="True" onselectedindexchanged="cboLang_SelectedIndexChanged" Font-Size="XX-Small" Width="95" Height="26" >
                    <asp:ListItem Value="EN-US">ENGLISH</asp:ListItem>
                    <asp:ListItem Value="ZH-CN">&#20013;&#25991;</asp:ListItem>
                    <asp:ListItem Value="TH-TH">&#3616;&#3634;&#3625;&#3634;&#3652;&#3607;&#3618;</asp:ListItem>
                    <asp:ListItem Value="EN-IE">ti&#7871;ng Vi&#7879;t</asp:ListItem>
                    <asp:ListItem Value="EN-TT">Korean</asp:ListItem>
                    <asp:ListItem Value="EN-AU">Indo</asp:ListItem>
                    </asp:DropDownList>

and add the following style to the head tag

<style>
.select
{
    border-radius: 5px;
   -webkit-appearance: none;
}
</style>

score 2 · Accepted Answer · answered Dec 14 '12 at 11:23

2

You cant do it with asp.net dropdown controls. you can use auto complete textbox at that place. it is also possible to hide arrow with telerik combo box.

answered Dec 14 '12 at 11:23

Manibhadra

400
4
6

score -1 · Answer 3 · edited May 23 '17 at 12:32

-1

Not possible to change how <select> tag is rendered , you can use any other way to display multiple values as autocomplete textbox

check these links :

Remove dropdown (select) button from dropdown menus?

Remove drop-down arrow from <select> element?

edited May 23 '17 at 12:32

Community

1
1

answered Dec 14 '12 at 11:28

Mahmoud Farahat

5,364
4
43
59

How to remove the dropdownlist arrow in asp.net?

3 Answers3