html - Dropdown image not appearing infront -

html - Dropdown image not appearing infront -

i have dropdown having image in place of arrow. having cross browsing issue. in chrome displaying fine in mozilla image shown in back. attached screenshot.

dropdown 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>

class

.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; }

use opacity:0 property select tag.

html css