选择上的 CSS 箭头不单击

Question

我有一个带有 CSS 箭头（和线）的选择下拉列表。如果您单击箭头以外的任何位置，下拉菜单会打开，但如果您直接单击箭头，则不会打开。我希望箭头也可以点击。

这是我的代码：

.select {
  position: relative;
  z-index: 1;
  background-color: #fff;
  border-radius: 6px;
}

.select:before,
.select:after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  z-index: 1;
}

.select:before {
  right: 37px;
  content: '';
  display: block;
  width: 1px;
  height: 22px;
  margin-top: -11px;
  background-color: #636667;
}

.select:after {
  right: 15px;
  width: 0;
  height: 0;
  margin-top: -3px;
  border: transparent 6px solid;
  border-top: #636667 6px solid;
}

<div class="select">
  <select class="form-control" id="state-dropdown">
	<option>Select State</option>
  </select>
</div>

Answer 1

尝试添加pointer-events: none.