論壇經常有人會問到用CSS如何美化Select標簽，其實但凡你看到很酷的都是用javascript來實現的。昨天試著做了一下，基本實現的初級功能。拿出來和大家一起分享一下。先可以看一下預覽效果：http://www.iwcn.net/demo/select。

【功能需求】

1、調用要方便，做好之后應該像這樣：

function?loadSelect(selectobj){

//傳入一個select對象就能將他的樣式美化

}

2、不改變原有表單項，表單的頁面代碼不去破壞：

用戶注冊

帳號

密碼

省份

江西

福建

廣東

浙江

【實現思路】

第一步：將表單中的select隱藏起來。

為什么？很簡單，因為這家伙太頑固了，用css根本搞不出來你想要的。所以把它殺掉。

第二步：用腳本找到select標簽在網頁上的絕對位置。

我們在那個位置上用DIV標簽做個假的、好看點的來當他的替身。

第三步：用腳本把select標簽中的值讀出來。

雖然藏起來了，但它里邊的options我們還有用呢，統統取過來。

第四步：當用戶點擊select標簽的替身，也就是div的時候。我們再用一個div浮在上一個div的下邊，這個就是options的替身了。

大致上就是這樣了，接下來我們一步一步去實現它！

【準備工作】

1、想好你要把select美化成什么樣子，并準備好相應的圖片。我準備了兩張小圖，就是下拉箭頭1和下拉箭頭2，1是默認樣式，2是鼠標移過來的樣式。

2、寫好一個普通的表單遞交頁面，比如下邊這個。注意我給select定義了基本的CSS樣式、在頭部添加了調用js文件的代碼、在body中添加了調用函數的腳本。

用javascript美化Select

用javascript模擬select達到美化效果 用戶注冊

帳號

密碼

省份 江西 福建 廣東 浙江

[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執行]

【編寫javascript】

新建一個js文件并保存為select.js，剩下的工作我們全部在這個js中去完成。

函數名：loadSelect(obj);

參數：select對象

相關函數：

function?Offset(e)

//取標簽的絕對位置

{

var?t?=?e.offsetTop;

var?l?=?e.offsetLeft;

var?w?=?e.offsetWidth;

var?h?=?e.offsetHeight-2;

while(e=e.offsetParent)

{

t+=e.offsetTop;

l+=e.offsetLeft;

}

return?{

top?:?t,

left?:?l,

width?:?w,

height?:?h

}

}第一步：把select的絕對位置記錄下來。一會替身上來就知道應該站那里了。

var?offset=Offset(obj);

//這里解釋一下Offset是一個函數，用來獲取對象的絕對位置。寫在loadSelect()函數外邊的。他有四個屬性分別是top/left/width/height。

第二步：將select隱藏。

obj.style.display="none";

第三步：虛擬一個div出來代替select

var?iDiv?=?document.createElement("div");

iDiv.id="selectof"?+?obj.name;

iDiv.style.position?=?"absolute";

iDiv.style.width=offset.width?+?"px";

iDiv.style.height=offset.height?+?"px";

iDiv.style.top=offset.top?+?"px";

iDiv.style.left=offset.left?+?"px";

iDiv.style.background="url(icon_select.gif)?no-repeat?right?4px";

iDiv.style.border="1px?solid?#3366ff";

iDiv.style.fontSize="12px";

iDiv.style.lineHeight=offset.height?+?"px";

iDiv.style.textIndent="4px";

document.body.appendChild(iDiv);

第四步：把原始select沒人選中的值給它。

iDiv.innerHTML=obj.options[obj.selectedIndex].innerHTML;

第五步：為替身添加鼠標移過樣式。

iDiv.οnmοuseοver=function(){//鼠標移到

iDiv.style.background="url(icon_select_focus.gif)?no-repeat?right?4px";

}

iDiv.οnmοuseοut=function(){//鼠標移走

iDiv.style.background="url(icon_select.gif)?no-repeat?right?4px";

}

第六步：添加關鍵的鼠標點擊事件。

iDiv.οnclick=function(){//鼠標點擊

if?(document.getElementById("selectchild"?+?obj.name)){

//判斷是否創建過div

if?(childCreate){

//判斷當前的下拉是不是打開狀態，如果是打開的就關閉掉。是關閉的就打開。

document.getElementById("selectchild"?+?obj.name).style.display="none";

childCreate=false;

}else{

document.getElementById("selectchild"?+?obj.name).style.display="";

childCreate=true;

}

}else{

//初始一個div放在上一個div下邊，當options的替身。

var?cDiv?=?document.createElement("div");

cDiv.id="selectchild"?+?obj.name;

cDiv.style.position?=?"absolute";

cDiv.style.width=offset.width?+?"px";

cDiv.style.height=obj.options.length?*20?+?"px";

cDiv.style.top=(offset.top+offset.height+2)?+?"px";

cDiv.style.left=offset.left?+?"px";

cDiv.style.background="#f7f7f7";

cDiv.style.border="1px?solid?silver";

var?uUl?=?document.createElement("ul");

uUl.id="uUlchild"?+?obj.name;

uUl.style.listStyle="none";

uUl.style.margin="0";

uUl.style.padding="0";

uUl.style.fontSize="12px";

cDiv.appendChild(uUl);

document.body.appendChild(cDiv);

childCreate=true;

for?(var?i=0;i

//將原始的select標簽中的options添加到li中

var?lLi=document.createElement("li");

lLi.id=obj.options[i].value;

lLi.style.textIndent="4px";

lLi.style.height="20px";

lLi.style.lineHeight="20px";

lLi.innerHTML=obj.options[i].innerHTML;

uUl.appendChild(lLi);

}

var?liObj=document.getElementById("uUlchild"?+?obj.name).getElementsByTagName("li");

for?(var?j=0;j

//為li標簽添加鼠標事件

liObj[j].οnmοuseοver=function(){

this.style.background="gray";

this.style.color="white";

}

liObj[j].οnmοuseοut=function(){

this.style.background="white";

this.style.color="black";

}

liObj[j].οnclick=function(){

//做兩件事情，一是將用戶選擇的保存到原始select標簽中，要不做的再好看表單遞交后也獲取不到select的值了。

obj.options.length=0;

obj.options[0]=new?Option(this.innerHTML,this.id);

//同時我們把下拉的關閉掉。

document.getElementById("selectchild"?+?obj.name).style.display="none";

childCreate=false;

iDiv.innerHTML=this.innerHTML;

}

}

}

}

最后這個比較復雜一點，再解釋一下，我們在做這一步之前，select的樣子已經出來了，下一步就是再加一個div去模仿select被點擊之后出現的下拉選項了。我們可以講select標簽的options通過javascript提取出來，把它寫成這樣：

• optionName
• optionName
• optionName

基本上就這樣了。還有些缺陷，有時間大家可以一起補充！

總結

以上是生活随笔為你收集整理的html表单下拉美化教程,用javascript实现select的美化的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。