title: Click uncovered portion of element below another element
body: <p><a href="https://i.stack.imgur.com/M97HD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/M97HD.png" alt="enter image description here"></a>
  <br>
  <br>
  I have two elements, <code>input[type="text"]</code> and <code>select</code>, the <code>select</code> is beneath the <code>input</code> but a small portion of the <code>select</code> is not covered (the dropdown arrow). However, I still can't click the <code>select</code>'s dropdown arrow.</p>
  
  <p>I still need both of them to function normally, that's why I'm not using <code>pointer-events: none;</code> to the <code>input</code>.</p>
  
  <p>The <code>input</code> uses <code>float: left</code> while the <code>select</code> uses <code>position: relative</code> and <code>z-index: -1</code></p>
  
  <p><strong>PUG (HTML)</strong></p>
  
  <pre><code>input#search-box(type="text")
  select#search-by
    option(value="o1") Sample 1
    option(value="o2") Sample 2
    option(value="o3") Sample 3
  </code></pre>
  
  <p><strong>Stylus (CSS)</strong></p>
  
  <pre><code>#search-box {
    float left
    margin 7px 0px 0px 10px
    height 50%
    width 215px
    display inline-block
    vertical-align middle
  }
  
  #s2id_search-by {
    position relative
    top -43px
    left 2px
    z-index -1
  }
  #s2id_search-by a {
    height 33px
    width 234px
  }
  </code></pre>
  
  <p>For the libraries involved in this part of my code, I'm using <code>select2.js</code> for the select</p>
  
  <p>How can I make this design to work? Thanks.</p>