单击另一个元素下方的元素的未覆盖部分

Question

我有两个元素，input[type="text"]和select，select位于input之下，但select的一小部分未被覆盖（下拉箭头） 。但是，我仍然无法点击select的下拉箭头。

我仍然需要他们两个正常运作，这就是为什么我没有pointer-events: none;使用input。

input使用float: left而select使用position: relative和z-index: -1

PUG（HTML）

input#search-box(type="text")
select#search-by
  option(value="o1") Sample 1
  option(value="o2") Sample 2
  option(value="o3") Sample 3

手写笔（CSS）

#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
}

对于我的代码的这部分涉及的库，我使用select2.js进行选择

如何使此设计正常工作？感谢。