Webページにカスタムドロップダウンがあります。ドロップダウンは、Chrome、Mozilla、IE9、Safariの4つの主要なブラウザで完全に表示されます。ただし、オペラではドロップダウンの画像は表示されません。それを修正するにはどうすればよいですか?これは私のhtmlです。
<div style="width:172px;">
<div class="blue" style="float: left; width:100%;">
<div class="lightblueHeading" style="text-align: left;">
No. Of Guests
</div>
<div>
<div class="styled-select">
<select name="ctl00$cphMain$ddlNoOfGuest" id="cphMain_ddlNoOfGuest" style="width: 165px;">
<option value="-1">No. of Guests</option>
<option value="1">1</option>
<option selected="selected" value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
</select>
</div>
</div>
</div>
<span id="cphMain_cmpval_NoOfGuest" class="validation" style="float:left;display:none;">* - the field is required</span>
</div>
CSS
.blue {
border: 1px solid #74A4CA;
}
.lightblueHeading {
font-size: 12px;
background-color: #74A4CA;
color: white;
border: 1px solid #74A4CA;
padding-left: 4px;
}
.styled-select {
overflow: hidden;
background: url(../images/signup-dropdown_icon.png) no-repeat right;
background-color: white;
width: 100%;
background-position: 100%;
display: inline-block;
}
.styled-select select {
background: transparent;
width: 110% !important;
line-height: 1;
border: 0;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none !important;
appearance: none;
font-size: 12px;
float: left;
}