首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

可编辑的上拉框

2012-09-08 
可编辑的下拉框?可编辑下拉框:实际就是用一个input typetext/框遮挡在select的上面来实现的但是在IE6下

可编辑的下拉框

?可编辑下拉框:实际就是用一个<input type=text/>框遮挡在select的上面来实现的
但是在IE6下z-index属性失效没有达到正确的效果(IE6下select标签总在最顶层)
但是可以用iframe来遮挡select标签,实现思路:

1.用一个iframe标签遮挡在select标签之上( z-index默认是0,所以iframe的该属性大于0即可)
2.再用一个<input type=text/>遮挡iframe标签就OK了

要让z-index起作用有几个小小前提:
1.就是元素的position属性要 是relative,absolute或是fixed。
2.设置z-index的标签不能含有浮动属性
3.父标签position属性为relative或absolute时,子标签的absolute属性是相对于父标签而

言的。而在IE6下,层级的表现有时候不是看子标签的z-index多高,而要看它们的父标签的

z-index谁高谁低,只看绝对定位的第一个元素的第一个爸爸,或者说是最老的那个爸爸级

别的z-index层级(最顶层父标签的层级)
z-index属性解释详见:http://www.wufangbo.com/ie6-ie7-z-index-bug

?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Pragma" content="No-cache" /><meta http-equiv="Cache-Control" content="no-cache, must-revalidate" /><meta http-equiv="Expires" content="-1" /><style type="text/css">.T_iframe   {       position: absolute;    width: 156px;        height: 20px;       z-index:1;     left:0;    top:0;    filter: alpha(opacity = 0);     -moz-opacity:0;                opacity: 0; }   #SELECT_DDNSService{       position: absolute;      width: 156px;        height: 16px;       z-index:10;     left:0;    top:0;}</style></head>  <body><div style="position:relative;margin:100px 100px;">     <span><select style="width:178px;"   onclick="this.parentNode.nextSibling.value=this.value;">  <option id="idSelectDyn" value="dyndns.org">dyndns.org</option>  <option id="idSelect3322" value="3322.org">3322.org</option>  <option id="idSelectDtDNS" value="www.dtdns.com">www.dtdns.com</option>  <option id="idSelectZone" value="oray.cn">oray.cn</option> </select></span><input  type="text" id="SELECT_DDNSService" /> <iframe ></iframe>  </div> </body></html>  

?

热点排行