HTML , CSS , 下拉箭头 , 选择

Question

我在这里创建了 fiddle ，它显示了选择和下拉箭头。

我的问题是箭头是使用 CSS 创建的并位于选择的顶部。但是单击箭头不会打开下拉菜单。

1. 有没有办法像我们使用图像箭头时那样使用该 css 作为选择的背景。
2. 或者是否可以模拟箭头点击时的行为？

.selectClass {
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    -moz-appearance: none;
    border: none;
    width: 100px;
    background: #EEE;
    height: 30px;
    font-size: 20px;
    padding-left: 5px;
}
.dropDownArrow {
    position: relative;
    margin-left: 75px;
    margin-top: -20px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #555;
}

<select class="selectClass">
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
</select>
<div class="dropDownArrow"></div>

Answer 1

到目前为止，这里最简单的解决方案是忽略鼠标在箭头上的点击，并使用 pointer-events: none; 让点击“通过”。这是您的代码唯一需要的更改，请在此处查看:

.selectClass {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  -moz-appearance: none;
  border: none;
  width: 100px;
  background: #EEE;
  height: 30px;
  font-size: 20px;
  padding-left: 5px;
}
.dropDownArrow {
  pointer-events: none;
  position: relative;
  margin-left: 75px;
  margin-top: -20px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #555;
}

<select class="selectClass">
  <option>One</option>
  <option>Two</option>
  <option>Three</option>
</select>
<div class="dropDownArrow"></div>