title: Styling Select and Input Element for ComboBox in HTML
body: <p>For a custom user control in MS Dynamics CRM-style, I need to have a combobox, which is not natively present in HTML.</p>
  
  <p>My idea was to put an <code>input</code> and a <code>select</code> after each other. The Problem is that I can </p>
  
  <ul>
  <li><p>use the <code>select</code> control's arrow itself, but then I need to get rid
  of the value part of the <code>select</code> control. It is at least present
  when I mark via moving the mouse with button down, even with <code>color:transparent</code>, or </p></li>
  <li><p>lay another element on top, but then I cannot open the dropdown
  programmatically.</p></li>
  </ul>
  
  <p>The control must as well stretch along the <code>input</code> element to full size of the whole control.</p>
  
  <p>Also, in the Internet Explorer, the dropdown list also moves with the currently selected element, so if I select, say, the third <code>option</code>, when opening next time, the first two <code>option</code>s will be displayed above.</p>
  
  <p>Since this custom control will be displayed in an <code>iframe</code>, I have to use a <code>select</code> so that the dropdown-part will be rendered outside the <code>iframe</code> as well and does not get cut off. This is required.</p>
  
  <p>Please see <a href="https://jsfiddle.net/z7tcrtdg/" rel="nofollow">https://jsfiddle.net/z7tcrtdg/</a> to get a rough idea.</p>