可编辑下拉框,思路:一个input,一个select,位置重叠,input在上,宽度微调到如下效果:
问题:ie6下select的层级高bug.
解决办法:添加个空的iframe,用iframe遮住select,再用input遮住iframe。
另外ie6下select无法用css设置高度,需微调下其余控件高度以达到一致。
html:
<div id="wrapper"> <input type="text" id="txtItem" /> <iframe></iframe> <select id="optItem"> <option value="1">opt1</option> <option value="2">opt2</option> <option value="3">opt3</option> </select> </div>
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%;}