純css為select新增樣式(無腳本)實作_HTML/Xhtml_網頁製作

改變select預設的樣式，一般情路情況下透過ul,li來模擬來實現。
有很多Jquery外掛就是透過這樣的方式來改變select預設樣式的。
根據程式哥哥那邊的反映，此種方式在form提交後無法取得數據，後來經過實驗，用了不同的JS/Jquery插件，都是同樣的結果：無法取得數據。

後來看一篇外國人寫的博客，用css的樣式來實現在select外面添加一個div，設定select的寬度小於父級div的寬度，然後透過設定div的background屬性，改變select預設箭頭的樣式。
此種方法不失為一個好方法，不寫腳本，只用單純的css來實作。

不過這種方法也是有瑕疵的，就是在IE系列下，選取某個選項的時候會有背景色塊，IE7-IE10都有此bug。
在Opera下，設定div的背景圖不顯示，也就是select的下拉箭頭不顯示，這個不知道是什麼原因所致。
以下代碼

複製代碼

代碼如下:

AAAAAAAAAAA
BBBBBBBBBBB
CCCCCCCCCCC
DDDDDDDDDDD


程式碼如下:

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

border:1px solid #ccc;

-moz-border-radius: 5px; /* Gecko browsers */ -webkit-border-radius: 5px; /wsers */ -webkit-border-radius: 5px; /wsers * broers * border-radius:5px; }

.select_style select { padding:5px; background:transparent; width:268px; font-size: 16px; border:none; height:30p; webkit-appearance: none; /*for Webkit browsers*/

}