默認(rèn)的select下拉框户辫，樣子丑渐夸，并且在各個(gè)瀏覽器的樣子還不一樣。所以需要美化渔欢。當(dāng)然墓塌，要完全兼容的話，改起來(lái)會(huì)很費(fèi)事膘茎，這時(shí)就建議你自己模擬了桃纯，或找相關(guān)插件。比如jquery插件啊披坏，js插件等等. 這里主要介紹默認(rèn)下拉框美化方法态坦。
思路：
重置select 默認(rèn)下拉框樣式，用自定義的圖片覆蓋默認(rèn)下拉三角按鈕棒拂。如果低版本ie9以下的話伞梯，建議套個(gè)外層div（overflow-x: hiddden）玫氢，讓select超出外層寬度隱藏。
關(guān)鍵代碼：
dom結(jié)構(gòu)：
<div class="button custom-select">
<select>
<option value="選擇1" selected="selected">Connecticut</option>
<option value="選擇2">New York</option>
<option value="選擇3">Maryland</option>
<option value="選擇4">Virginia</option>
</select>
</div>
css：
select{
border: solid 1px #ccc;
appearance: none;/*清除select下拉框默認(rèn)樣式*/
-moz-appearance: none;
-webkit-appearance: none;
padding-right: 14px;/*為下拉小箭頭留出一點(diǎn)位置谜诫，避免被文字覆蓋*/
background: url("img/arrow.png") no-repeat scroll right center transparent;/*自定義圖片覆蓋原有的下三角符號(hào)*/
}
select::-ms-expand {
display: none;/*清除IE默認(rèn)下拉按鈕漾峡，但是測(cè)試發(fā)現(xiàn)IE10以上有效，IE8喻旷，9默認(rèn)下拉按鈕仍舊存在*/
}
（2020.3.20）優(yōu)化更新
- 簡(jiǎn)單自定義select的樣式生逸，更少代碼，更優(yōu)體驗(yàn)且预。
- 適用場(chǎng)景：移動(dòng)端簡(jiǎn)單的h5頁(yè)面槽袄，微信公眾號(hào)類，掃碼錄入信息等等锋谐。
- 優(yōu)點(diǎn)：代碼少遍尺，無(wú)需引入三方ui庫(kù)，體驗(yàn)還算可以涮拗。
-
用到的圖片：
icon-select-arrow.png
具體代碼：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>select自定義樣式</title>
<style type="text/css">
/*自定義下拉框樣式*/
select{
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
cursor: pointer;
}
/*清楚IE選擇框的默認(rèn)樣式乾戏，隱藏下拉箭頭*/
select::-ms-expand {
display: none;
}
select.select-custom{
border: none;
outline: none;
background: transparent url(img/icon-select-arrow.png) no-repeat right center;
padding-right: 1.1em;
background-size: 0.8em 0.6em;
font-size: 16px;
line-height: 1.5;
}
select.select-custom option:hover{
background-color: #f00;
}
.select-custom-wrap{
display: inline-block;
padding: 0 4px;
border: 1px solid #848484;
}
</style>
</head>
<body>
<div class="select-custom-wrap">
<select class="select-custom">
<option value="1">谷歌瀏覽器</option>
<option value="2">火狐瀏覽器</option>
<option value="3">Opera瀏覽器</option>
<option value="4">IE瀏覽器</option>
</select>
</div>
</body>
</html>
-
效果圖：
主流瀏覽器效果.png option選項(xiàng)彈出框的效果：PC端瀏覽器效果插件不大，移動(dòng)端三热，
iOS系統(tǒng)是滾動(dòng)選擇類鼓择，Android系統(tǒng)是彈出框選擇類。
