title: How to open an HTML select tag by custom button?
body: <p>I'm developing a web page for mobile phones, and I need to implement a custom design for select tags. I need to place a button near (over) the select tag and it should open, "fire-up" options.</p>
  
  <p>For a better understanding I made a screenshot:</p>
  
  <p><img src="https://i.stack.imgur.com/3OwSd.png" alt="enter image description here"></p>
  
  <p>If the red button is clicked it should open the select tag.</p>
  
  <p>What have I tried:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  #trigger_button { width:20px;height:20px;background:red;float:left;margin-left:-15px; }
  &lt;/style&gt;
  
  &lt;body&gt;
      &lt;p&gt;Foo Select&lt;/p&gt;
  
      &lt;table&gt;
      &lt;tr&gt;&lt;td&gt;
         &lt;select name='foo_select' style='float:left;' id='foo_select'&gt;
            &lt;option value='1'&gt;test AAAAAAAAAAAAAAAAA 1&lt;/option&gt;
            &lt;option value='2'&gt;test BBBBBBBBBBBBBBBBB 2&lt;/option&gt;
            &lt;option value='3'&gt;test CCCCCCCCCCCCCCCCC 3&lt;/option&gt;
          &lt;/select&gt;
  
          &lt;div id='trigger_button' onclick="$('#foo_select').trigger('click');"&gt;&lt;/div&gt;
      &lt;/td&gt;&lt;/tr&gt;
      &lt;/table&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>Notice!</strong></p>
  
  <p>On Android OS Chrome browser will react different like on PC! On Android Chrome the options are showing in a different scrollable frame (like a pop-up).</p>
  
  <p>Is this possible? Can I open a select tag with a custom button?</p>