可编辑的下拉框
?可编辑下拉框:实际就是用一个<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>
?