Bootstraps select lists on iOS devices look kind of broken. This snipped ensures that the select lists look like the normal bootstrap select lists. It also makes sure that the arrow is still clickable by setting the background of the select element to transparent and hides the arrow behind the select list.

bootstrap_select.less

@media all and (-webkit-min-device-pixel-ratio: 0) {
  select.form-control {
    // Make background transparent so that the arrow is "clickable"
    position: relative;
    z-index: 1;
    background: transparent;
    -webkit-appearance: none;
  }

  .select--wrp {
    // set the background back to white
    position: relative;
    background: #fff;
  }
  .mol--select--wrp:after {
    content: '▼';
    display: block;
    position: absolute;
    right: 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    color: #555555;
  }
}

select.html

 <div class="select--wrp">
   <select class="form-controll">
     <option>Fancy</option>
     <option>Bootstrap</option>
     <option>Dropdown</option>
   </select>
 </div>