css修改select标签默认样式

之前写select选择框的时候就发现pc端在不同浏览器会有不同样式，在移动端更是丑的厉害。于是在网上扒拉总结了几个清除默认样式的方法，以备日后之需。

一、

ios端去除默认样式：

background-color:transparent; border-color:transparent;

安卓端仅使用上面的代码不够，会发现某些浏览器会出现箭头和高亮情况。要加上下面一条语句，取消webkit默认样式

-webkit-appearance: none;

二、

修改后的select标签效果。比默认样式要稍微能接受一点了

<div class="select" style="margin-top:0px;outline:none;border:1px solid #BBBBBB;border-radius:4px;position:relative;">
<select id="orderTimeDataSel" class="text" style="height:40px;-webkit-appearance:none;appearance:none;border:none;font-size:18px;padding:0px 10px;display:block;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;background-color: #FFFFFF;color:#333333;border-radius:4px;">
<option>--预约日期--</option>
</select>
</div>