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

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

原来谷歌模拟器出了问题。当我在iPad上尝试时，应该这样做。