0顶

自定义select的样式

稿源：互联网 2022-06-13 02:11:59 点击： 4670 撤稿纠错

可编辑的select,还可以通过CSS来修改外形

以下讨论的是和select 特效相关的自定义select的样式教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>EditSelect</title> <script> scHTML='<div id="selectcontent" class="selectdiv" style="visibility:hidden;"><iframe id=selframe frameborder=0 height=100%></iframe><div id="selecthtml" class="selectcontent">select&Aacute;&ETH;&#177;&#237;</div></div>' document.write(scHTML) vDiv=selectcontent vDivHtml=selecthtml function editselect(name,size,defaulttext,width,height,readonly){ var combo=this; this.options=new Array(); this.name=name; this.divname=name+'_div'; this.buttonname=name+'_button'; this.tablename=name+'_table'; this.htmltable=name+'_html' if (!height) this.height=0; else this.height=height if (width) this.width=width if (!size) size=8 if (!defaulttext) defaulttext="" if (!readonly || readonly==0) {readonly="" }else {if (readonly==1) readonly="readonly style=cursor:Default";this.readonly=1} esHTML='<div id='+this.divname+'>' +'<table id='+this.tablename+' cellpadding=0 cellspacing=0 class=select><tr><td bgcolor=#FFFFFF>' +'<input type=text class=selecttext size="'+size+'" name='+name+' value="'+defaulttext+'" '+readonly+'><td><button class=selectbutton id='+this.buttonname+'>6</td></tr></table>' +'</div>' document.write(esHTML) this.sbutton=eval("document.all."+this.buttonname) if (this.readonly==1) eval(this.name).onclick=function(){combo.show()} this.sbutton.onclick=function(){combo.show()} this.show=function(){ pDiv=eval(combo.divname) pTable=eval(combo.tablename) var vHTML='<table id=htmltable cellspacing="0" cellpadding="2" bgcolor="#ffffff" class="selecttable" width=100%>' for (i=0;i<combo.options.length;i++) { vHTML+='<tr onmouseover="mo(this)" onmouseout="mu(this)" onclick="document.all.'+combo.name+'.value=this.innerText;selectcontent.style.visibility='hidden'"><td nowrap>'+combo.options[i] } vHTML+="</table>" vDivHtml.innerHTML=vHTML vtop=pDiv.offsetTop+pDiv.offsetHeight vleft=pDiv.offsetLeft+1 vParent = pDiv.offsetParent; while (vParent.tagName.toUpperCase() != "BODY") { vleft += vParent.offsetLeft; vtop += vParent.offsetTop; vParent = vParent.offsetParent; } var redge=document.body.clientWidth-vleft var bedge=document.body.clientHeight-vtop if (!combo.width) {vDiv.style.width=pTable.offsetWidth} else {vDiv.style.width=combo.width} if (combo.height==0) { vDiv.style.pixelHeight=parseInt(htmltable.offsetHeight)+2 vDivHtml.style.pixelHeight=parseInt(htmltable.offsetHeight)+2 } else { if (htmltable.offsetHeight>combo.height) { vDiv.style.pixelHeight=combo.height vDivHtml.style.pixelHeight=combo.height } else { vDiv.style.pixelHeight=parseInt(htmltable.offsetHeight)+2 vDivHtml.style.pixelHeight=parseInt(htmltable.offsetHeight)+2 } } vDivHtml.scrollTop=0 if (redge<vDiv.offsetWidth) vDiv.style.left=vleft-1-(vDiv.offsetWidth-redge) else vDiv.style.left=vleft-1 if (bedge<vDiv.offsetHeight) //vDiv.style.top=vtop-vDiv.offsetHeight-pDiv.offsetHeight vDiv.style.top=vtop-vDiv.offsetHeight+bedge else vDiv.style.top=vtop vDivHtml.style.width=parseInt(vDiv.style.width) vDiv.style.visibility="visible" } this.add=function(text){ combo.options[combo.options.length]=text } this.about=function(){ } } function mo(obj){ obj.style.backgroundColor="#000099" obj.style.color="#ffffff" } function mu(obj){ obj.style.backgroundColor="" obj.style.color="#000000" } document.onmousedown=function(){ if (vDiv.style.visibility=="visible"){ mx=event.x + document.body.scrollLeft my=event.y + document.body.scrollTop; x1=vDiv.offsetLeft y1=vDiv.offsetTop x2=vDiv.offsetLeft+vDiv.offsetWidth y2=vDiv.offsetTop+vDiv.offsetHeight if (mx<x1 || my<y1 || x2<mx || y2<my) { vDiv.style.visibility='hidden' } } } </script> <style> .selecttext{ border:0px height: 16; font-family:arial; font-size:12px; } .selectbutton{ font-family:webdings; font-size:10px; height: 19; width: 16; border:1px solid #83A5EB; line-height:0px; padding-bottom:3px; background-color:#D1E0FD } .selecttable{ font-family:arial; font-size:12px; cursor:Default; } .selectcontent { position: absolute; top:0; left:0; overflow:auto; border:1px solid #000000 } .selectdiv { position: absolute; width:100; overflow:hidden; } .select{ border-collapse: collapse; border:1px solid #7F9DB9 } </style> </head> <body bgcolor="#83A5EB"> <table border="0" width="100%"> <tr> <td width="151" align="center">可编辑的Select</td> <td><script> var sel1=new editselect("select1","25","可编辑的Select",""); sel1.add("这是一个可以编辑的Select") sel1.add("支持CSS") sel1.add("可以通过CSS，修改外形") sel1.add("突破原来的Select诸多限制") </script></td> </tr> <tr> <td width="151" align="center">长度可以随意修改 可以设置为只读</td> <td> <script> var sel2=new editselect("select2","20","长度可以随意修改",250,82,1); sel2.add("这是一个可以编辑的Select") sel2.add("支持CSS") sel2.add("可以通过CSS，修改外形") sel2.add("作者:舜子制作") sel2.add("MSN:puterjam@msn.com") </script> </td> </tr> <tr> <td width="151" align="center">可以遮盖系统Select</td> <td> <script> var sel3=new editselect("select3","25","可以遮盖系统Select","",41); sel3.add("这是一个可以编辑的Select") sel3.add("支持CSS") sel3.add("可以通过CSS，修改外形") sel3.add("突破原来的Select诸多限制") </script> </td> </tr> <tr> <td width="151" align="right">　</td> <td><select><option>系统的Select</option></select>　</td> </tr> </table> </body> </html>调试代码 <a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>

关于自定义select的样式的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/200808254160.shtml方便下次再访问哦。

·上一篇： 51jpb选择城市功能特效代码
·下一篇： js联动三级,四级菜单特效

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

自定义select的样式

文章分类LIST >>返回首页

最新游戏

最新新闻