HTML + Add input field inside a dropdown box

Question

A new idea came across my mind.Someone may have implemented this. I am trying to get a way to add a textbox inside a dropdown list.

Means I want to add a input box i

Answer 1

I haven't tried implementing this yet so I don't know that it's 100% correct but you could position a hidden (read display:'none';) input box on top of the select.

HTML

   Input Value
   USA
   Mexico
   Canada

CSS

#countryInput{ display:'none';position:relative;top:-15px;}

Use jQuery to show the input box on selecting a particular value from the dropdown (and hide for all other values).

$(function(){
   $('#country').on('change',function(){
      if(this.val()==="INP"){
         $('#countryInput').prop('display','');
      } else {
         $('#countryInput').prop('display','none');
      }
   });
});

Then write a function to add the result to the dropdown if you wish.