CSS实现的Select下拉框，支持编辑

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>CSS实现的Select下拉框</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;±í</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"><font size="2">可编辑的Select</font></td>
	<td><script>
var sel1=new editselect("select1","25","可编辑的Select","");
sel1.add("这是一个可以编辑的Select")
sel1.add("Loveyou")
sel1.add("可以通过CSS，修改外形")
sel1.add("突破原来的Select诸多限制")
</script></td>
	</tr>
	<tr>
		<td width="151" align="center"><font size="2">长度可以随意修改<br>可以设置为只读</font></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"><font size="2">可以遮盖系统Select</font></td>
		<td>
		<script>
var sel3=new editselect("select3","25","可以遮盖系统Select","",41);
sel3.add("这是一个可以编辑的Select")
sel3.add("这效果确实不错")
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>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

CSS实现的Select下拉框，支持编辑

分类

表单按钮

描述

这个下拉框挺美观的，还给人新鲜的感觉，用CSS+js技术实现的，当选中某一个值的时候可以编辑，这和系统的Select出现了区别，挺不错，推荐给大家。