css - 样式选择不适用于移动设备

Question

样式化在常规浏览器中工作的选择。但是当对移动设备(在 chrome 中模拟)使用相同的选择时，它看起来像图片中的那样。有什么我可以做的，让选择显示所有选项，并让它摆脱黑色区域，如图 2 所示？

图2:

<div class="styled-select"> 
   <select id="TimeFrom" name="TimeFrom"> 
   <option>08.00</option>
   <option>09.00</option>
   <option>10.00</option>
   <option>11.00</option>
   <option>12.00</option>
    ...
  </select>
</div>


.styled-select select {
        background: transparent;
        width: 200px;
        padding: 5px;
        font-size: 16px;
        line-height: 1;
        border: 0;
        border-radius: 0;
        height: 34px;
        -webkit-appearance: none;
    }

    .styled-select {
        width: 170px;
        height: 34px;
        overflow: hidden;
        background: url(/Content/down_arrow_select.jpg) no-repeat right #ddd;
        border: 1px solid #ccc;
    }

Answer 1

结果证明这只是 googles 模拟器出了点问题。当我在 iPad 上试用它时，它应该是这样。