主要的原理是,底层是一个Select, 上面是一个Input, 前提是要把后面的Select挡住。
原来利用z-index在IE7 都没有问题,后来发现在IE6 里不行,不支持Select的z-index,听说可以用iframe, 可是iframe是要用src的。。。。
搞了半天,才知道,原来就用iframe起个遮挡作用就好了,不用把input放在iframe里。
因为iframe可以挡住select, input 可以挡住iframe (可以偏偏input 不能挡住select, 诡异的IE 6).
代码如下,注意z-index
<
iframe
style
="position:absolute; visibility:visible; top:0px; left:0px; width:121px; height:20px; z-index:102; "
contenteditable
="true"
scrolling
="no"
>
</
iframe
>
<
select
style
="position:absolute; top:0px; left:0px;"
>
<
option
>
A form selection list
</
option
>
<
option
>
A form selection list
</
option
>
<
option
>
A form selection list
</
option
>
</
select
>
<
input
id
="Text1"
type
="text"
value
="abc"
style
=" position:absolute;top:0px; left:0px; z-index:103; width: 116px;"
/>
要想实现一个控件,就根据这个思想自己写一个UserControl就可以了。