select自定義下拉箭頭
阿新 • • 發佈:2019-02-08
現場還原
在HTML5開發APP應用的過程中,有些表單頁面需要用到select標籤,開發的時候用的安卓手機測試,樣式的顯示非常完美,但一用蘋果手機測試,select的下拉箭頭就不會顯示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>select修改下拉按鈕</title>
</head>
<body>
<select name="" id="">
<option value="aaa">aaa</option>
<option value="bbb">bbb</option>
<option value="ccc">ccc</option>
<option value="ddd">ddd</option>
<option value="eee">eee</option>
</select>
</body>
</html>
解決方案
在考慮之後決定利用css中的背景圖片的方式解決這個相容問題,先將select的預設樣式去除,然後將下拉箭頭的圖示設定到background中。
css程式碼
<style>
select {
/*Chrome和Firefox裡面的邊框是不一樣的,重新覆蓋一下*/
border: solid 1px #000;
/*很關鍵:將預設的select選擇框樣式清除*/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
/*在選擇框的最右側中間顯示下拉箭頭圖片*/
background: url("下拉箭頭圖片") right center no-repeat ;
/*為下拉小箭頭留出一點位置,避免被文字覆蓋*/
padding-right: 20px;
}
/*清除ie的預設選擇框樣式清除,隱藏下拉箭頭*/
select::-ms-expand { display: none; }
</style>