下拉图片未在歌剧中显示

时间:2013-03-08 16:20:15

标签: html css

我的网页上有自定义下拉列表。下拉列表在4种主流浏览器中完美显示,即Chrome,Mozilla,IE9,Safari。但是,下拉的图像没有在歌剧中显示。我该怎么做才能纠正它? 这是我的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;
}

This is the valid dropdown

This dropdown is being shownin opera

1 个答案:

答案 0 :(得分:0)

Opera不支持透明选择背景。试试这个:

.styled-select select {
  background: rgba(0,0,0,0);
  background: transparent;
  .
  .
  .