select的預設樣式往往很醜，為保證頁面樣式風格統一，需要對select進行美化。雖然其美化的外掛程式很多，一搜一大把，但是需要引入長長的css檔案和js檔案實在是件頭痛的事。其實select的實現原理很簡單，就是乙個點選 切換 顯示和隱藏 並傳值 的過程。用jquery模擬了，樣式想怎麼寫就怎麼寫，且不限數量。
樸素的效果：
›選項1
›選項一
css：
ul.select_box
.select_box span
.select_box .span_aa
.select_box ul
.select_box li
.select_box li:hover
.select_box font
js：
$(function(){
var s_title=$(".select_box span");
var s_select=$(".select_box li");
s_title.click(function(e){
$(this).addclass("span_aa");
$(this).next("ul").show();
e.stoppropagation();
s_select.click(function(){
var s_text=$(this).html();
var s_title_2=$(this).parent('ul').prev("span");
s_title_2.html(s_text).removeclass("span_aa");
$(this).parent('ul').hide();
$(document).click(function(){
s_title.removeclass("span_aa");
$(".select_box ul").hide();
效果預覽：
美化select的jquery外掛程式
自己寫的乙個美化select外掛程式，瀏覽器自帶的實在太醜，還不能用css自定義。外掛程式主要原理是隱藏原生的select控制項，支援select上設定change事件。指令碼1 2 iselect 3 自定義select控制項4 5 function fn.iselect.defaults,con...
美化的select下拉框
ie7瀏覽器以後的下拉框，給他加上邊框樣式，是沒用的。要是想做出樣式好看的下拉框需要用js或者jquery來模擬實現。如下 class r class link id link css div.bottomtop div.bottomtopright dl.link div.bottomtop di...
類似 select 選擇框效果及美化
網上有各種各樣的關於 select 選擇框的美化，找了很多，並沒有好的樣式效果。所以就找了乙個利用 ul li 做的類似 select 選擇框的效果，不廢話了，先上圖，效果如下 對於上圖的箭頭效果，可以看看我上篇部落格 點選這裡 點選乙個 test 就會把列表顯示出來，再次點選，列表隱藏，選擇乙個 ...