javascript - 下拉箭头不会在 mozilla 或 ie 中消失

Question

我在 asp.net 中开发了一个网站，我有四个连接到访问数据库的下拉列表。问题是当我在 firefox 中查看时，或者 ie 有一个我不想要的默认下拉箭头，但如果我在 chrome 中查看，它不存在。我尝试将这些添加到我的样式类中:

 -moz-appearance: none; opacity:0; overflow:hidden; width:120%

还有

 -moz-appearance: button; overflow:hidden; width:120%; opacity: 0

我没有成功，我很好，卡住了。非常感谢任何帮助

这是我的下拉列表:

<asp:DropDownList id="DropDownList3" 
                        runat="server" 
                        AutoPostBack="True" 
                        DataSourceID="SqlDataSource1" 
                        DataTextField="Plant" 
                        DataValueField="Plant" 
                        min-width="156px"
                        width="120%";
                        Font-Bold="true" 
                        Font-Size="x-Large" 
                        style="margin-left: 250px; margin-top:-44.5px;
                        margin-bottom:-20px; 
                        background-color: #FFFFFF; box-shadow:none; 
                        outline-color: #FFFFFF;
                       -moz-appearance: none;
                        overflow:hidden; appearance: none; 
                       -webkit-appearance:none;
                        border: none;
                       text-align: right;" 
                        Enabled="False">
                </asp:DropDownList>

Answer 1

使用 overflow:hidden 简单地将下拉列表放入宽度较小的容器 DIV 中应该可以解决问题，例如:

<div style="width:200px; overflow:hidden" >
    <asp:DropDownList ID="DropDownList1" runat="server" style="width:220px">
    </asp:DropDownList>
</div>