Question

我有一张下拉图片代替箭头。但我有一个交叉浏览问题。在Chrome中它显示很好，但在mozilla中，图像显示在后面。附件是截图。

下拉HTML

<td align="right">
 <div class="blue" style="float: left;">
    <div class="lightblueHeading" style="text-align: left;">No. Of Guests</div>
    <div>
        <div class="styled-select">
            <asp:DropDownList ID="ddlNoOfGuest" runat="server" Style="width: 165px;"></asp:DropDownList>
        </div>
    </div>
 </div>
</td>

类

.styled-select
{
    overflow: hidden; /*height: 24px;     background: url(../images/dropdown_icon.png) no-repeat right;*/
    background: url(../images/signup-dropdown_icon.png) no-repeat right;
    background-color: white;
    width: 100%;
}
.styled-select select
{
    background: transparent; /*border: 1px solid #e8e9e9;*/
    font-size: 12px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    visibility: hidden;

}

Chrome dropdown

Mozilla dropdown

Answer 1

使用opacity:0作为select代码的属性。

Answer 2

您尝试的方法在每个浏览器中并不完全兼容，并且您面临浏览器兼容性问题以及您如何管理问题，但将来您可能会面临浏览器兼容性问题，因为市场上有很多IE版本所有人最喜欢的是IE7。所以从问题来看，我的建议是使用如下所示的基于jquery的插件：

下拉图片没有出现在前面

2 个答案: