css修改select標籤預設樣式
阿新 • • 發佈：2018-12-26
之前寫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>