title: How to combine both <select> and <input> by an aesthetic way?
body: <p>I work on a userscript (Greasemonkey/TamperMonkey), and I need to add a <code>&lt;input&gt;</code> in my drop-down list if ever an element is selected.</p>
  
  <p>It is a way to make my <code>&lt;select&gt;</code> dynamic and interactive so that the user can add items by itself.</p>
  
  <p>I would like visually, the user has the impresion that the <code>&lt;input&gt;</code> is an <code>&lt;option&gt;</code> in the <code>&lt;select&gt;</code>.</p>
  
  <p>The only way I've found to do this is to reduce the width of <code>&lt;select&gt;</code> and display an <code>&lt;input&gt;</code>.</p>
  
  <p><br>
  <br>
  <strong>HTML:</strong></p>
  
  <pre><code>&lt;input style='display:none'&gt;&lt;/input&gt;
  &lt;select id='my_select' style='width:150px'&gt;
      &lt;option&gt;Test 1&lt;/option&gt;
      &lt;option&gt;Test 2&lt;/option&gt;
      &lt;option&gt;Test 3&lt;/option&gt;
      &lt;option&gt;Make me feel input&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p><br></p>
  
  <p><strong>Script:</strong></p>
  
  <pre><code>$('#my_select').change(function() {
      var choosen = $("select option:selected").text();
  
      if (choosen == 'Make me feel input') {
          $('input').attr('style','width:125px;border-right:0px');
          $('select').attr('style','width:24px;margin-left:-4px;border-left:0px')
      }
      else {
          $('input').attr('style','display:none');
          $('select').attr('style','width:150px');
      }
  });
  </code></pre>
  
  <p><br></p>
  
  <p>The result is pretty nice, <a href="http://jsfiddle.net/AnbmU/" rel="nofollow noreferrer">you can try it on jsFiddle</a>.</p>
  
  <p>Unfortunately, because of <code>border-left:0px</code> and <code>border-right:0px</code> appearance is completely lost, and the style of the input and select become ugly.</p>
  
  <p><img src="https://i.stack.imgur.com/tpjYG.png" alt="Yuck!"> (Firefox)</p>
  
  <p>Moreover, the final appearance depends on the browser used. With Chrome, for example, here's what happens: <img src="https://i.stack.imgur.com/GcFDS.png" alt="Yuck²!"></p>
  
  <p>So I wish I configure my input-select in order to make it look good regardless of the browser. Is it possible to simulate the appearance given by Firefox using CSS and JavaScript?</p>
  
  <p>Of course, I thought about using a plugin like Chosen, SelectBoxIt ou Select2, but I do not think they are easily compatible with my input-select (because of the width resize for example).</p>
  
  <p>Could you help me please?</p>