Styled select not working for mobile

Question

Styling a select that works in a regular browser. But when using the same select for a mobile (emulated in chrome) it looks like in the picture. Is there something i can to do make the select show all the options and also make it get rid of the black field, as in pic 2?

Pic 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

Turned out it was just something wrong with googles emulator. When i tried it in an iPad it as it should.