text box on top of select box...

[fdgsogc]

I'm trying to simulate a combo dialog. I'm trying to do this by putting a text field on top of a select field. However, I just learned that a select field does not adhere to the z-index feature in CSS. Any way around this?

Here is my current failed example.

<script>
function popText(x) {
document.getElementById('textBox1').value=x;
}
</script>

<select name=fruits id=fruits onchange="popText(value);" style="width:200;z-index:10">
<option value="Bananas">Bananas</option>
<option value="Apples">Apples</option>
<option value="Oranges">Oranges</option>
<option value="Plums">Plums</option>
<option value="Grapes">Grapes</option>
<option value="Strawberries">Strawberries</option>
<option value="Blueberries">Blueberries</option>
</select>

<input type=text value='' id=textBox1 name=textBox1 style="width:180;position:relative;top:-40;left:-10;z-index:20">

 

[tgreer]

This link explores the exact topic:

http://www.tgreer.com/comboArticle.html

But to answer your specific question, the problem with z-index only exists in Internet Explorer. FireFox respects z-index.



Thomas D. Greer

http://www.tgreer.com

Providing PostScript & PDF
Training, Development & Consulting