原生的select下拉框其實(shí)挺方便的，直接把選項(xiàng)寫(xiě)入option就能得到一個(gè)流暢的下拉框幔睬，但是原生的樣式也是讓人憂愁眯漩。
首先，在各大瀏覽器中渲染出來(lái)的樣式結(jié)果也是多樣化麻顶，ie下的樣式更是與眾不同赦抖，會(huì)根據(jù)選項(xiàng)位置進(jìn)行滑動(dòng)。
從左往右依次為：Firefox辅肾、ie队萤、Edge、chrome矫钓、Safari
一般這種情況下要尔，我們會(huì)選擇重置樣式。然后你會(huì)發(fā)現(xiàn)份汗，select超愛(ài)自己的盈电，有些樣式你根本無(wú)法變動(dòng)蝴簇。舉例子（運(yùn)行環(huán)境為chrome）：
<!--html-->
<select >
<option value="chrome">chrome</option>
<option value="safari">safari</option>
<option value="Edge">Edge</option>
<option value="firefox">firefox</option>
<option value="ie8">ie8</option>
</select>
/*css*/
body{
background: #FFBD1E;
}
select{
font-family: "微軟雅黑";
margin:100px;
background: rgba(0,0,0,0);
width: 249px;
height: 40px;
font-size: 18px;
color: white;
text-align: center;
border: 1px #1a1a1a solid;
border-radius: 5px;
}
option{
color: black;
background: #A6E1EC;
line-height: 20px;
}
select:focus{
border: 2px #ddd solid;
box-shadow: 0 0 15px 1px #DDDDDD;
}
option:hover{
background: #EBCCD1;
}
出現(xiàn)的樣式如下
chrome渲染
經(jīng)過(guò)多次測(cè)試杯活，發(fā)現(xiàn)有幾部分的樣式是無(wú)法覆蓋的。
- select的focus狀態(tài)：雖然有呈現(xiàn)出來(lái)熬词，但是明顯被原生樣式壓在下面了
- option的hover狀態(tài)：同上
- option的背景顏色：無(wú)法實(shí)行透明度旁钧，一旦透明度變?yōu)?，會(huì)自動(dòng)轉(zhuǎn)換成白色互拾。
- 字體位置：text-align：center無(wú)法實(shí)現(xiàn)
如果需求變化不大歪今，倒是可以直接采用原生的select，但是我所做的頁(yè)面色彩比較豐富颜矿，select原生樣式很明顯無(wú)法滿足我寄猩。網(wǎng)上有一些說(shuō)法是將select透明度為0，或是appearance為none骑疆，但是都不是我要的田篇，最終決定用列表的方法，自己寫(xiě)一個(gè)下拉框箍铭。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*css*/
/*通用樣式*/
body{
background: #FFBD1E;
}
ul,li{
list-style: none;
padding: 0;
margin: 0;
}
/*下拉框樣式*/
#select{
margin:100px;
background: rgba(0,0,0,0);
width: 249px;
height: 40px;
font-family: "微軟雅黑";
font-size: 18px;
color: white;
border: 1px #1a1a1a solid;
border-radius: 5px;
}
.select-head{
overflow: hidden;
width: 249px;
height: 40px;
box-sizing: border-box;
padding: 0 10px;
line-height: 40px;
}
.select-head .select-head-cont{
float: left;
}
.select-head .select-icon{
float: right;
}
.option{
text-indent: 10px;
margin-top: 1px;
width: 249px;
color: black;
background: rgba(236,111,111,0.1);
line-height: 25px;
border: 1px #cfcfcf solid;
display: none;
}
.option-item:hover{
background: rgba(204,106,67,0.3);
}
</style>
</head>
<body>
<!--html-->
<ul id="select">
<li>
<div class="select-head">
<span class="select-head-cont"></span>
<span class="select-icon">▼</span>
</div>
<ul class="option">
<li class="option-item">chrome</li>
<li class="option-item">safari</li>
<li class="option-item">Edge</li>
<li class="option-item">firefox</li>
<li class="option-item">ie8</li>
</ul>
</li>
</ul>
<script type="text/javascript">
//int
var selectHead = document.getElementsByClassName('select-head')[0];
var selectHeadCont = document.getElementsByClassName('select-head-cont');
var Option = document.getElementsByClassName('option')[0];
var optionItem = document.getElementsByClassName('option-item');
/*默認(rèn)是第一個(gè)選項(xiàng)*/
selectHeadCont[0].innerHTML = optionItem[0].innerHTML;
/*點(diǎn)擊后出現(xiàn)下拉框*/
selectHead.addEventListener('click',function(){
Option.style.display = 'block';
},false);
/*點(diǎn)擊選項(xiàng)后出現(xiàn)在下拉框*/
var len = optionItem.length;
for(var i=0;i<len;i++){
optionItem[i].index = i;
optionItem[i].addEventListener('click',function(){
selectHeadCont[0].innerHTML = optionItem[this.index].innerHTML;
Option.style.display = 'none';
},false);
}
/*點(diǎn)擊其他地方時(shí)泊柬，select會(huì)收起來(lái)*/
document.body.addEventListener('click',function(){
Option.style.display = 'none';
}.false);
</script>
</body>
</html>
貼出全部代碼后，展示的樣式如下
手寫(xiě)樣式
