DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML和Xhtml >> 純css為select添加樣式(無腳本)實現
純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的下拉箭頭不顯示,這個不知道是什麼原因所致。
以下代碼

復制代碼代碼如下:
<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*/
}
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved