改變select默認的樣式，一般情路情況下通過ul,li來模擬來實現(xiàn);Jquery插件也是這樣,接下來介紹一種不寫腳本，只用單純的css來實現(xiàn)。在IE系列下，選中某個選項的時候會有背景色塊，IE7-IE10都有此bug，感興趣的朋友可以參考下

改變select默認的樣式，一般情路情況下通過ul,li來模擬來實現(xiàn)。

有很多Jquery插件就是通過這樣的方式來改變select默認樣式的。

根據(jù)程序哥哥那邊的反映，此種方式在form提交后無法獲取數(shù)據(jù)，后來經(jīng)過實驗，用了不同的JS/Jquery插件，都是同樣的結果：無法獲取數(shù)據(jù)。

后來看一篇外國人寫的 博客，用css的樣式來實現(xiàn) 在select外面添加一個div，設置select的寬度小于父級div的寬度，然后通過設置div的background屬性，改變select默認箭頭的樣式。

此種方法不失為一個好方法，不寫腳本，只用單純的css來實現(xiàn)。

不過這種方法也是有瑕疵的，就是在IE系列下，選中某個選項的時候會有背景色塊，IE7-IE10都有此bug。

在Opera下，設置div的背景圖不顯示，也就是select的下拉箭頭不顯示，這個不知道是什么原因所致。

代碼如下:

<div class="select_style">

<select name="select">

<option>AAAAAAAAAAA</option>

<option>BBBBBBBBBBB</option>

<option selected>CCCCCCCCCCC</option>

<option>DDDDDDDDDDD</option>

</select>

</div>

代碼如下:

.select_style {width:240px; height:30px; overflow:hidden; background:url(../images/arrow.png) no-repeat 215px;

border:1px solid #ccc;

-moz-border-radius: 5px; /* Gecko browsers */

-webkit-border-radius: 5px; /* Webkit browsers */

border-radius:5px;

}

.select_style select { padding:5px; background:transparent; width:268px; font-size: 16px; border:none; height:30px;

-webkit-appearance: none; /*for Webkit browsers*/

}