At work I have an application that requires a user to select a choice from a drop down box or a <select> control for the HTML savvy. As far as I know (or could find) there is no such control in HTML 4.01 that allows both a select box with the added bonus of taking free form user input. So to meet the needs of this project I crafted one up using CSS and JavaScript. This is my first dive into CSS/JS in a while so be gentle.

I accomplished this by creating two elements (SELECT & INPUT) and then switching the elements visibility properties.

<script type="text/javascript" >
function showOther(id, id2){
  if(id.options[id.selectedIndex].label == "Other"){
   id.style.visibility = "hidden";
   id2.style.visibility = "visible";
  }
}
</script>
<select id="sel1" onChange="showOther(sel1, inp1)"
style="position:absolute; left:10; top:10;" >
  <option value="0" label=""></option>
  <option value="1" label="Choice1">Choice1</option>
  <option value="2" label="Choice2">Choice2</option>
  <option value="3" label="Other">Other</option>
</select>
<input type="text" id="inp1" style="visibility='hidden'"
style="position:absolute; left:10; top:10;" />

To see it in action go here