可编辑下拉框,思路:一个input,一个select,位置重叠,input在上,宽度微调到如下效果:
问题:ie6下select的层级高bug.
解决办法:添加个空的iframe,用iframe遮住select,再用input遮住iframe。
另外ie6下select无法用css设置高度,需微调下其余控件高度以达到一致。
html:
js:
var opt = document.getElementById("optItem"); var txt = document.getElementById("txtItem"); opt.onchange = function(){ txt.value = opt.options[opt.selectedIndex].text; };
css:
* { padding:0;margin:0;} #wrapper { position:relative;width:10em;margin:10px;z-index:0;height:1.3em;} #optItem { position:absolute; width:100%;z-index:0;height:100%} #txtItem { position:absolute;width:90%;z-index:2;height:100%;} iframe { visibility:hidden;_visibility:visible; position:absolute; width:90%; z-index:1;height:100%;}