html select 样式t调整_select标签样式美化

js部分

var childCreate=false;

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

}

}

function loadSelect(obj){

//第一步：取得Select所在的位置

var offset=Offset(obj);

//第二步：将真的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.png) no-repeat right";

iDiv.style.border="1px solid #cccccc";

iDiv.style.fontSize="12px";

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

iDiv.style.textIndent="4px";

document.body.appendChild(iDiv);

//第四步：将select中默认的选项显示出来

var tValue=obj.options[obj.selectedIndex].innerHTML;

iDiv.innerHTML=tValue;

//第五步：模拟鼠标点击

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

iDiv.style.background="url(icon_select.png) no-repeat right";

}

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

iDiv.style.background="url(icon_select.png) no-repeat right";

}

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;

}

}

}

}

}

css部分

select{width:200px;height:30px;}

body部分

你最喜欢的运动是什么

你的高中班主任姓名

你的出生地是哪

loadSelect(document.form1.problem);

分类:

前端笔记

/

浏览量:  1666

2014-7-28 9:48 Monday

昵称

邮件地址 (选填)

个人主页 (选填)

评论内容

发表评论

send